jQuery Validate add method to compare dates

Posted on 2014-01-13
Medium Priority
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
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

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 2000 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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.
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 …
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…
Suggested Courses

650 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