Solved

jQuery Validate add method to compare dates

Posted on 2014-01-13
5
572 Views
Last Modified: 2014-01-22
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
0
Comment
Question by:maddisoncr
  • 3
  • 2
5 Comments
 

Author Comment

by:maddisoncr
ID: 39776472
screenshot
0
 
LVL 12

Expert Comment

by:mkishline
ID: 39777843
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);
}

$(document).ready(function(){
	$('#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
		}
		else{
			//Notify user that "Date Received" should precede "Date Due"
		}
	});
}

Open in new window

0
 

Author Comment

by:maddisoncr
ID: 39778947
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?
0
 
LVL 12

Accepted Solution

by:
mkishline earned 500 total points
ID: 39779566
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.

Thanks!
0
 

Author Closing Comment

by:maddisoncr
ID: 39800715
Thanks for your help

got it working and it's working well :-)
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now