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

Similar Posts:

    None Found

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

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>

Archives

Get Our Latest Updates. Subscribe Now

Categories