We help IT Professionals succeed at work.

Using the date picker for client side date validation

My website currently has 3 drop down for date: a Month, a Day and a Year drop downs. It's looking like to simply add client side validation wil be easiest if I use the jQuery UI Date Picker as a background validator.

I need to check date like 2/30/2000 and tell the user it's an invalid date. I have the folowing validation code that's working:

            onClose: function (dateText, inst) {
                if (dateText != $.datepicker.formatDate($.datepicker.regional[''].dateFormat, new Date(dateText))) {
                    alert("The date you specified is not a valid date.");
                    setTimeout(function () { $("DOB").focus(); }, 250);
                }
            }

How can I use this as a background validation test? I'd need to re-write it as a stand-alone JavaScript function, right?

How would I make the click event for the button succeed when the date is valid, yet fail and abort the submission when it's a bad date?

Please explain how I'd show the error message.

Thanks!
Comment
Watch Question

SILVER EXPERT
Expert of the Year 2008
Top Expert 2008
Commented:
read comments in code:
<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<base href="http://jqueryui.com/demos/datepicker/dropdown-month-year.html" />
	<meta charset="utf-8"> 
	<title>jQuery UI Datepicker - Display month &amp; year menus</title> 
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> 
	<script src="../../jquery-1.6.2.js"></script> 
	<script src="../../ui/jquery.ui.core.js"></script> 
	<script src="../../ui/jquery.ui.widget.js"></script> 
	<script src="../../ui/jquery.ui.datepicker.js"></script> 
	<link rel="stylesheet" href="../demos.css"> 
	<script> 
	$(function() {
		//this would trigger validation after the user inputs something
		$('#DOB').bind('change',dateValidator);
		
		//this validates the date on demand. So if you have a function that is calling a series of validating functions,
		//like you typically do on the onsubmit event handler of a form (see example below)
		//you can call the dateValidator function below by dynamically passing it the id of the element as the second argument
		//the dateValidator() will extract the date from the field itself if you provide it an id
		$('form').bind('submit',function(){
			dateValidator(null,'DOB');
		});
	});
	
	function dateValidator(dateText,element)
	{
		var id=null;
		if("undefined"!=element)
		{
			id='#'+element;
			dateText=$(id).val();
		}
		else
		{
			id=this;
			dateText=this.value;
		}

		if (dateText != $.datepicker.formatDate($.datepicker.regional[''].dateFormat, new Date(dateText))) 
		{
                    alert("The DOB you specified is not a valid date.");
                    setTimeout(function () { $(id).val('').focus(); }, 250);
        }				
	}
	</script> 
</head> 
<body> 
 
<div class="demo"> 
 
<p>Date: <input type="text" id="DOB"></p> 
 
</div><!-- End demo --> 
 
 
 
<div class="demo-description"> 
<p>Show month and year dropdowns in place of the static month/year header to facilitate navigation through large timeframes.  Add the boolean <code>changeMonth</code> and <code>changeYear</code> options.</p> 
</div><!-- End demo-description --> 
 
</body> 
</html>

Open in new window

curiouswebsterSoftware Engineer

Author

Commented:
Thanks!

Explore More ContentExplore courses, solutions, and other research materials related to this topic.