jQuery Validate add method to compare dates

I am using jQuery validate on a form. To take the validation a little further i need to be able to compare dates

ie. date1 is okay as long as it's less than or equal to date2

ive put something together but it isn't working how i'd expect. i initially thought that this may be a dd/mm/yyyy issue.

if someone could have a look for me that would be great. sorry if the code has become a little messy

For example, In the screenshot it shows an error when the date recieved is less than any other date. this is correct and shouldn't show an error. A list of the rules are within the html

Thanks in advance

heres a live link
Live Link
Who is Participating?
mkishlineConnect With a Mentor Commented:
My apologies, I missed some of your validation at the end of the file.

To address the primary issue of making the validation fire properly, all you need to do is tweak the date portion of your validation methods (greaterThan, greaterThanEqual, lessThan, and lessThanEqual):

For example, in greaterThan:
if (!/Invalid|NaN/.test(new Date(processUKDate(value)))) {
	return new Date(processUKDate(value)) > new Date(processUKDate(target));

Open in new window

The change here is just wrapping each instance of "value" and "target" in your processUKDate() helper function.

Once that change was in place, the form seemed to be validating the way that you wanted, acknowledging the multiple calls for various fields.

Let me know if this circumvents your concerns with the error message consistency.

maddisoncrAuthor Commented:
I prefer to parse the dates and attach events to elements on the page (in this instance I put it on the "blur" event of the Date Received and Date Due fields but you can attach this anywhere).

function makeDate(dateStr){
	//Split the date on the "/" delimiter
	var dateArr = dateStr.split('/');
	//Parse date fragments into month, day, and year variables
	var m = parseInt(dateArr[1], 10), d = parseInt(dateArr[0], 10), y = parseInt(dateArr[2], 10);
	//Return javascript date object created by date parts
	return new Date(y, m-1, d);

	$('#enquirydatercvd, #enquirydatedue').blur(function(){
		//Once the date values from the form are represented as a Date() object you can use standard comparison operators.
		if(makeDate($('#enquirydatercvd').val()) <= makeDate($('#enquirydatedue').val())){ 
			//Dates are valid
			//Notify user that "Date Received" should precede "Date Due"

Open in new window

maddisoncrAuthor Commented:
Thanks for the comment

I'm stuck between two approaches at the moment. Ideally i'd like to use the validation plug in and not deviate from it. However, I am having an issue at the moment because it doesn't seem to like calling the same method more than once ie :

enquirydatercvd: {
required: true,
ukDate: true,
lessThanEqual: "#enquirystartdate",
lessThanEqual: "#enquiryfinishdate",
lessThanEqual: "#enquirydatedue"

Open in new window

Is there a reason for this ?

I do like your approach above but what is the best way to incorporate this so that the error messages are consistent. i'm thinking that i'd need to replicate the highlight and unhighlight methods and change the error message directly in css ?

Instead of calling the lessThanEqual method 3 times seperately, would i be better sending an array and doing it that way?
maddisoncrAuthor Commented:
Thanks for your help

got it working and it's working well :-)
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.