Date range validation with jQuery UI datepicker: order of events

Question

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.

I should note that in our code we're currently using this focus-then-blur workaround http://stackoverflow.com/a/19838943/749227. Mostly I'm curious as to why the datepicker seems to cause whatever event to fire that validation is looking for prior to actually updating the value, and how to get around it without having to remember to copy-paste the same workaround every time we have a validated date range. — jinglesthula, Sep 23 '16 at 23:13

Sparky · Accepted Answer · 2016-09-24T15:53:48.477

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.

To whom it may concern. If you run into this and you're thinking of extending the datepicker so the `_selectDate` method can do the `.valid()` call, see my comment on this answer http://stackoverflow.com/a/13763473/749227. Apparently datepicker is a bit special compared to its siblings. — jinglesthula, Sep 26 '16 at 16:21

score 0 · Answer 2 · answered Sep 26 '16 at 16:36

Here's the code I ended up using to solve the issue and keep it DRY.

$.datepicker._selectDate_super = $.datepicker._selectDate; 
$.datepicker._selectDate = function(id, dateStr) {
    $.datepicker._selectDate_super(id, dateStr);
    $(id).valid();
};

(or if you prefer es6 and ASI ;)

$.datepicker._selectDate_super = $.datepicker._selectDate 
$.datepicker._selectDate = (id, dateStr) => {
    $.datepicker._selectDate_super(id, dateStr)
    $(id).valid()
}

Date range validation with jQuery UI datepicker: order of events

2 Answers2