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
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.
18 Comments on jQuery validation : End date should be Greater than Start date
- Pingback: uberVU - social comments
-
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.
-
Hi,
Thanks for quick reply.Can't we have a common validation function which accepts 2 parameters( From date and To date).
-
Hi,
Thanks for quick reply.Can't we have a common validation function which accepts 2 parameters( From date and To date).
-
As you know we need to mention class name for validation. In this function we are taking value of start date using class name. So if we have two same class name than every time code get first mention start date. Which is not actually what we need for second start date and end date validation. This is the case why we need to define two different functions.
-
As you know we need to mention class name for validation. In this function we are taking value of start date using class name. So if we have two same class name than every time code get first mention start date. Which is not actually what we need for second start date and end date validation. This is the case why we need to define two different functions.
-
Work great! congratulations
-
Work great! congratulations
-
Thanks..
-
Thanks..
-
If you are using jQuery UI Datepicker then you can inbuilt mechanism of date picker to solve this problem. Find out more on this link,
http://jquerybyexample.blogspot.com/2012/01/end-date-should-not-be-greater-than.html
- Pingback: learn
- Pingback: adult match maker
-
hello sir,
I need to know the code about how to validate start date and end date in jscript.. and the corresponding html code…because i dont know how to call a jscript function from html…. i used
but it will redirect to corresponding .js file….
Leave a Reply
Sponsors
About Author
PHP Freelancer
I am PHP Freelancer, Rakshit Patel working as PHP Programmer India. I am here to share all my developing knowledge with you people. For Hire PHP Developer India, contact me.Follow on twitter: @raxit4u2
Get Free Programming Tutorials:
January 12, 2010 at 7:14 pm