jQuery Validate add method to compare dates

Posted on 2014-01-13
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
Question by:maddisoncr
  • 3
  • 2

Author Comment

ID: 39776472
LVL 12

Expert Comment

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);

	$('#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


Author Comment

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?
LVL 12

Accepted Solution

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.


Author Closing Comment

ID: 39800715
Thanks for your help

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

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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)

744 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

10 Experts available now in Live!

Get 1:1 Help Now