It just takes 15 seconds. Send your
details and we’ll get back to you soon.

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

10 Responses to Client side date validation using jQuery plugins

  1. Kerrie says:

    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 says:

    Well your article is good and useful when someone is using validation plugin. But I encounter the same problem where I need to validate the date but I am not using the validation plugin. Looking for a solution which works without validation plugin. After some googling found a function which actually returns true or false based on the input.

    http://jquerybyexample.blogspot.com/2011/12/validate-date-using-jquery.html

    Thanks

  3. Thanks Virendra for sharing.

  4. asvtech says:

    Thanks a lot !!!

  5. Eugo says:

    @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.

  6. buzznet.com says:

    Hi! This is my first visit to your blog! We are a collection of volunteers and starting a new initiative in a community in the same niche.
    Your blog provided us valuable information to work on. You
    have done a wonderful job!

  7. storenvy.com says:

    If you want to grow your experience just keep visiting this web page and be updated with the hottest news update posted here.

  8. Very rapidly this site will be famous amid all blogging and site-building people, due to it’s fastidious articles or reviews

  9. Incredible points. Great arguments. Keep up the good spirit.

  10. Hello, after reading this awesome article i am too glad to share my know-how here with mates.

Leave a Reply

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

+ 1 = 2

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>