CODEWITHSUNDEEP
jqueryjquery-validation-engine
Mark Richards
Mark Richards

Reputation: 434

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

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.

Upvotes: 1

Views: 8282

Answers (4)

Rajesh Omanakuttan
Rajesh Omanakuttan

Reputation: 6918

Even if its too late, I have a simple answer, may it would help others. You can get notes on jQuery Validation Engine here which would be a better solutions for your question,

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

You can use future, now validators inside your HTML source to enable the validation.

For e.g.,

If you have twio text boxes having id attributes as start_date and end_date, you can use the validators as follows:

<input value="" class="validate[required,custom[date]]" type="text" id="start_date" name="start_date" />

<input value="" class="validate[required,custom[date],future["#start_date"],now["#start_date"]]" type="text"  id="end_date" name="end_date"  />

Then in the locale based validation engine file, please put the required message against the future validator to show up validation meassage while validating.

Hope this helps you.

Upvotes: 0

Hulk1991
Hulk1991

Reputation: 3163

Try this:

<input  class="validate[dateRange[group]]" type="text" id="date1">
<input  class="validate[dateRange[group]]" type="text" id="date2">

Upvotes: 1

Amy
Amy

Reputation: 7466

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" />

Upvotes: 3

Prabhakaran Parthipan
Prabhakaran Parthipan

Reputation: 4273

Use date rage in Jquery UI .please refer this http://jqueryui.com/datepicker/#date-range

Upvotes: 0

Related Questions