jinglesthula jinglesthula - 2 months ago 7
Javascript Question

Date range validation with jQuery UI datepicker: order of events

I'm using Jörn Zaefferer's jQuery validation plugin alongside the jQuery UI datepicker. I've created a set of custom rules for validating that a start date is prior to an end date.

The issue I have is that when I have an invalid range and use the datepicker UI to change a date to make the range valid, I see the validation running with the old values (and thus keeping the fields invalidated) prior to the onSelect callback firing for the datepicker.

I would expect that the datepicker would update the input's value when the user selects, and that any validation code would run when that happens and see the new value. But that doesn't seem to happen.

I've tried initializing the datepicker before initializing validation in hopes that the order the events were wired in would make the difference, but you can see it hasn't helped.

Here's the fiddle

To reproduce the issue, enter the 15th of a given month in the start, and the 7th of the same month in the end. Click the start field and then click or tab out to trigger validation. The fields correctly invalidate. Now click the start field and select the 1st of the same month. Note what's output at this point on the console.

The code, for reference:

HTML

<form id="daterange-form">
<div class="form-group">
<label for="startDate">Start Date</label>
<input type="text" id="startDate" name="startDate" class="validDate form-control" />
</div>

<div class="form-group">
<label for="endDate">End Date</label>
<input type="text" id="endDate" name="endDate" class="validDate form-control" />
</div>
<button type="submit" class="btn">Submit</button>
</form>


JavaScript

// Custom Rules
$.validator.addMethod('dateBefore', function(value, element, params) {
// if end date is valid, validate it as well
console.log('dateBefore', value, element, params)
var end = $(params);
if (!end.data('validation.running')) {
$(element).data('validation.running', true);
// The validator internally keeps track of which element is being validated currently. This ensures that validating 'end' will not trample 'start'
// see http://stackoverflow.com/questions/22107742/jquery-validation-date-range-issue
setTimeout($.proxy(
function() {
this.element(end);
}, this), 0);
// Ensure clearing the 'flag' happens after the validation of 'end' to prevent endless looping
setTimeout(function(){
$(element).data('validation.running', false);
}, 0);
}
return this.optional(element) || this.optional(end[0]) || new Date(value) < new Date(end.val());
}, 'Must be before its end date');

$.validator.addMethod('dateAfter', function(value, element, params) {
// if start date is valid, validate it as well
console.log('dateAfter', value, element, params)
var start = $(params);
if (!start.data('validation.running')) {
$(element).data('validation.running', true);
// The validator internally keeps track of which element is being validated currently. This ensures that validating 'end' will not trample 'start'
// see http://stackoverflow.com/questions/22107742/jquery-validation-date-range-issue
setTimeout($.proxy(
function() {
this.element(start);
}, this), 0);
// Ensure clearing the 'flag' happens after the validation of 'end' to prevent endless looping
setTimeout(function() {
$(element).data('validation.running', false);
}, 0);
}
return this.optional(element) || this.optional(start[0]) || new Date(value) > new Date($(params).val());
}, 'Must be after its start date');


// Code setting up datepicker and validation
$('#startDate, #endDate').datepicker({
onSelect: function(dateText, inst) {
console.log('onSelect', dateText, inst)
}
});
$('#daterange-form').validate({
debug: true,
rules: {
startDate: {dateBefore: '#endDate'},
endDate: {dateAfter: '#startDate'}
}
});


Side note: the timeouts and proxy calls in the rules are because this version of the library internally assumes serial validation. If you try to validate another field in the middle of a rule, Bad Things happen. The
validation.running
semaphore code is to prevent infinite looping.

Answer

I've tried initializing the datepicker before initializing validation in hopes that the order the events were wired in would make the difference, but you can see it hasn't helped.

The order should/would not matter, because as you know, it's only the initialization, not the implementation.

I would expect that the datepicker would update the input's value when the user selects, and that any validation code would run when that happens and see the new value. But that doesn't seem to happen.

The date-picker does indeed update the input value, however validation is not triggered because that's not a normal event the validation plugin is expecting. Validation is only triggered on the submit, keyup and focusout events, none of which happen when using .datepicker().

So you can programmatically force a validation test using the .valid() method whenever you wish...

$('#startDate, #endDate').datepicker({
    onSelect: function(dateText, inst) {
        $(this).valid();
    }
});

DEMO: jsfiddle.net/nkvpsumq/2/

.valid() can be attached to an individual input, select, textarea, or an entire form. When attaching to a selector that contains more than one object, you must enclose this method using a jQuery .each(). In your case, the .each() is not needed because you're already programmatically re-triggering validation on the opposing field using this.element() within your custom rules. Now that you know about triggering the .valid() method via a .datepicker() event, you may wish to refactor the rest of your code a bit.