jQuery-Validation-Engine validation between start-date and end-date

Mark Richards picture Mark Richards · Mar 8, 2013 · Viewed 7.8k times · Source

I use jQuery Validation Engine for my form validation here is link for demo :

https://github.com/posabsolute/jQuery-Validation-Engine

I have tow text box, one is for start-date and second is for end-date. I want validate that start-date must not be greater then end-date and end-date must not be less then start-date.

If any validation is there then please tell me.

Answer

Amy picture Amy · Mar 8, 2013

Convert the values into a Date object. Then you can use it to compare, eg. convert to Unix timestamp or something...

See here for more info on Date:https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Date

Edit: I'll include more information as to what I mean....Under the Validators section of the jQuery Validation Engine page, look for the part where it describes funcCall[methodName].

funcCall[methodName] - Validates a field using a third party function call. If a validation error occurs, the function must return an error message that will automatically show in the error prompt.

So you can attach a function handler to that field, and that function would take the dates and then compare them.

<input value="" class="validate[required,funcCall[checkDates]]" type="text" id="startdate" name="startdate" />
<input value="" class="validate[required,funcCall[checkDates]]" type="text" id="enddate" name="enddate" />

Somewhere on the page, you have JavaScrip function:

var checkDates = function(field, rules, i, options) {
    // Do your date comparisons here between startdate and enddate values
};

Edit #2:

There's also:

past[NOW, a date or another element's name] - Checks if the element's value (which is implicitly a date) is earlier than the given date. When "NOW" is used as a parameter, the date will be calculate in the browser. When a "#field name" is used ( The '#' is optional ), it will compare the element's value with another element's value within the same form. Note that this may be different from the server date. Dates use the ISO format YYYY-MM-DD

and

future[NOW, a date or another element's name] - Checks if the element's value (which is implicitly a date) is greater than the given date. When "NOW" is used as a parameter, the date will be calculate in the browser. When a "#field name" is used ( The '#' is optional ), it will compare the element's value with another element's value within the same form. Note that this may be different from the server date. Dates use the ISO format YYYY-MM-DD

If that suits your fancy, here's the markup:

<input value="" class="validate[required,past[#enddate]]" type="text" id="startdate" name="startdate" />
<input value="" class="validate[required,future[#startdate]]" type="text" id="enddate" name="enddate" />