Client side date validation using jQuery plugins

I have been facing problem of validating a text input field for a valid date. We are using two popular jquery plugins : jQuery validation and jQuery UI datepicker for client side validation.

I googled it and found a good solution here http://stackoverflow.com/questions/511439/custom-date-format-with-jquery-validation-plugin but it was validating only the formatting i.e. 30-Feb-2010 is a valid date if the formating string was dd-MMM-yyyy. In our case 30-Feb-2010 should be invalid date.

The solution I got is to define custom validator for date as shown below :

<script type="text/javascript">
         jQuery.validator.addMethod(
               "customDateValidator",
                function(value, element) {
			// parseDate throws exception if the value is invalid
                     try{jQuery.datepicker.parseDate( 'm/dd/yy', value);return true;}
                     catch(e){return false;}
                    },
                    "Please enter a valid date"
                );
</script>

Now I am able to use this custom validator as :

<script type="text/javascript">
	// myDateInputField is the id of text input field
        // apply the custom validator
        jQuery("#myDateInputField").rules("add", {customDateValidator:true});
        // apply the date picker
        jQuery("#myDateInputField").datepicker();
</script>

Hope it helps you.

~~~ Bhagwat Kumar ~~~~
bhagwat@intelligrape.com

Cheers!
~~Bhagwat Kumar~~
bhagwat(at)intelligrape(dot)com
http://twitter.com/bhagwatkumar
http://in.linkedin.com/in/bhagwatkumar

5 thoughts on “Client side date validation using jQuery plugins

  1. Thanks so much for posting this, but I’m still having problems getting it all to work. Can you possible show me a “sample” of your finished page? Thank you so much.

  2. @virendra: true, but then you have to write all the cases for each date format. I only modified the above script to insert my variable for the date format string, and put my selector (to cover all the date fields I may have) and it just worked for each date format I may have.

    So if you aren’t using the validation plugin, of course you need to roll your own.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>