Looking to Build/Redesign a Website or Blog ?

To speak to Rakshit, call +91 968 704 2303

jQuery validation : End date should be Greater than Start date

jQuery validation is powerful,easy to use and most widely used client-side form validation. In addition to this you can add custom rules to default rules of jquery validation. This can be done by adding "addMethod" function as per your requirement.

In some case when you are working around dates you need to validate two dates. For e.g if you are working with Start Date and End date than "End Date must be Greater than Start Date". This can be done by javascript by comparing two dates. But if you are using jquery validation than below is the easy and simple way to check that End date is Greater than Start Date or not.

Just copy below code and paste it in to your validation file. Now add "enddate" class to end date textbox , add "startdate" class to startdate textbox. Thats it

$.validator.addMethod("enddate", function(value, element) {
var startdatevalue = $('.startdate').val();
return Date.parse(startdatevalue) < Date.parse(value);
}, "End Date should be greater than Start Date.");

Date.parse will convert string value(form element value) in to javascript date object as javascript we need to compare two dates not two string.

To know more about programming,JavaScript issues,jQuery,MYSQL database,php info,php editor,programming php,Open-source,php help and php script , subscribe to our feed by entering email address below. You will get updates via email about every tutorial posted on this site . It will not take more than a sec.

Enter your email address:
 
Feel free to ask any question. Just leave your comment below and we will answer your comment with in 24 hours.
Share:

23 Comments

  • Social comments and analytics for this post…

    This post was mentioned on Twitter by shailpatel05: RT @raxit4u2: RT: @raxit4u2: jQuery validation method : End date should be Greater than Start date” http://dzone.com/UvUz

  • What if more than 2 startdate and enddate controls exists?same below method cannot be used.What is the approach

  • What if more than 2 startdate and enddate controls exists?same below method cannot be used.What is the approach

  • @vishnu , yes if there are 2 start dates and end dates than same class will not be applicable. we need to create another method with different class name.
    For e.g. Above mention method is used for one start date and end date and another method will be used for another start date and end date.
    1.
    $.validator.addMethod("enddate", function(value, element) {
    var startdatevalue = $('.startdate').val();
    return Date.parse(startdatevalue) < Date.parse(value);
    }, "End Date 1 should be greater than Start Date 1.")
    2.
    $.validator.addMethod("enddate2", function(value, element) {
    var startdatevalue2 = $('.startdate2').val();
    return Date.parse(startdatevalue2) < Date.parse(value);
    }, "End Date 2 should be greater than Start Date 2.")
    Now what you have to do is just write different class.Thats it. 

  • @vishnu , yes if there are 2 start dates and end dates than same class will not be applicable. we need to create another method with different class name.

    For e.g. Above mention method is used for one start date and end date and another method will be used for another start date and end date.

    1.

    $.validator.addMethod("enddate", function(value, element) {

    var startdatevalue = $('.startdate').val();

    return Date.parse(startdatevalue) < Date.parse(value);

    }, "End Date 1 should be greater than Start Date 1.")

    2.

    $.validator.addMethod("enddate2", function(value, element) {

    var startdatevalue2 = $('.startdate2').val();

    return Date.parse(startdatevalue2) < Date.parse(value);

    }, "End Date 2 should be greater than Start Date 2.")

    Now what you have to do is just write different class.Thats it. 

Leave a Reply

Your email address will not be published.