Javascript alert to jquery dialog UI

[louisaivy]

Hi all i have a contact form that i have form validation on each input, if you press submit and you haven't filled out a required part of the form you will be alerted to fill it out. I want to now use a jquery dialog box instead of the javascript alert box, how would i go about making this change?

function validate_form ( )
{
	valid = true;

        if ( document.contact.contact_name.value == "" )
        {
                alert ( "Please enter your full name." );
                valid = false;
        }
		
		if ( document.contact.phoneNum.value == "" )
		{	
			alert ( "Please supply us with your Contact Number" );
                valid = false;
		}
		
		if ( document.contact.email.value == "" )
		{	
			alert ( "Please enter your Email Address" );
                valid = false;
		}
		
		if ( document.contact.feedback.value == "" )
		{	
			alert ( "Please enter your message" );
                valid = false;
		}

        return valid;
}

[jscheuer1]

Something like (in the head of the page):

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	window.$required = $('<div></div>').dialog({
		autoOpen: false,
		title: 'Required Information'
	});
});
function validate_form(){
	var valid = true;

	if (document.contact.contact_name.value == ""){
		$required.html("Please enter your full name.").dialog('open');
		valid = false;
	}

	if (document.contact.phoneNum.value == ""){	
		$required.html("Please supply us with your Contact Number").dialog('open');
		valid = false;
	}

	if (document.contact.email.value == ""){	
		$required.html("Please enter your Email Address").dialog('open');
		valid = false;
	}

	if (document.contact.feedback.value == ""){	
		$required.html("Please enter your message").dialog('open');
		valid = false;
	}

	return valid;
}
</script>

[louisaivy]

thanks that helps and it kind of even works! at the moment instead of showing a box it just displays the message without giving it a nice box to sit in. Probably a simple fix?

[jscheuer1]

Did you include the:

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">

tag in the head of the page as shown in my previous post? It should style the dialog box for you. At least it did here when I tried it out.

[louisaivy]

No i hadn't as i assumed it would have come with the jquery UI download package, which it doesn't.
Thanks for that, John much appreciated

[jscheuer1]

Yes, actually I started out downloading a jQuery UI package as well. But then I somehow got to:

http://example.nemikor.com/basic-usa...ery-ui-dialog/

and looked at the source code, which included:

	<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>

I'm familiar with the ajax.googleapis so I figured they probably had the latest versions mentioned on the other pages about the dialog function, so I just put those numbers in:

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

And it worked. So you really don't need the package, Google is hosting it and more (has the css too).

But you might want to style the dialog yourself. It takes a DOM inspector to see the class names involved. Or you can go to:

http://jqueryui.com/docs/dialog/

and click on the Theming tab to see the generated markup with class names as well as some advice on customizing the look of the dialog.

But for instance:

<style type="text/css">
.ui-dialog-titlebar {
	background: gold;
}
</style>

changes the background for the title bar of the dialog.