Client side date validation using jQuery plugins « Intelligrape Groovy & Grails Blogs

Client side date validation using jQuery plugins

Posted by

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

Tags: , ,
This entry was posted on March 31st, 2010 at 3:51 pm and is filed under Javascript/Ajax/JQuery . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

7 Responses to “Client side date validation using jQuery plugins”

  1. Kerrie says:
    July 12, 2011 at 8:51 pm

    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:
    December 20, 2011 at 12:37 pm

    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. Bhagwat Kumar says:
    December 20, 2011 at 1:56 pm

    Thanks Virendra for sharing.

  4. asvtech says:
    April 6, 2012 at 1:19 pm

    Thanks a lot !!!

  5. Eugo says:
    May 8, 2012 at 6:45 pm

    @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. HostGator Coupon 50 says:
    June 16, 2013 at 9:54 pm

    When I originally commented I clicked the -Notify me when new feedback are added- checkbox and now each time a comment is added I get four emails with the identical comment. Is there any approach you may remove me from that service? Thanks!

  7. Ravinder Tulsiani Learning Development Specialist says:
    June 19, 2013 at 8:29 am

    Excellent troubles completely, you just gained a brand new readers. What exactly would you recommend in relation to your post that you simply developed a couple of days prior to now? Any kind of particular?

Leave a Reply