Solved

jQuery Validate add method to compare dates

Posted on 2014-01-13
5
600 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

733 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