javascript - 使用 jQuery UI 日期选择器验证日期范围 : order of events

Question

我正在使用 Jörn Zaefferer 的 jQuery 验证插件以及 jQuery UI 日期选择器。我创建了一组自定义规则来验证开始日期是否早于结束日期。

我遇到的问题是，当我有一个无效范围并使用日期选择器 UI 更改日期以使该范围有效时，我会看到在之前使用旧值运行验证(从而使字段保持无效)为日期选择器触发 onSelect 回调。

我希望日期选择器会在用户选择时更新输入的值，并且任何验证代码都会在发生这种情况时运行并查看新值。但这似乎并没有发生。

我尝试在初始化验证之前初始化日期选择器，希望事件的连接顺序会产生影响，但您可以看到它没有帮助。

<强> Here's the fiddle

要重现该问题，请在开头输入给定月份的 15 日，在结尾输入同月的 7 日。单击开始字段，然后单击或跳出以触发验证。这些字段正确无效。现在单击开始字段并选择同月的 1 日。请注意此时控制台上的输出内容。

代码，供引用:

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'}
  }
});

旁注:规则中的超时和代理调用是因为该版本的库内部假设串行验证。如果您尝试验证规则中间的另一个字段，就会发生不好的事情。 validation.running信号量代码是为了防止无限循环。

Answer 1

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.

顺序应该/不重要，因为如您所知，这只是初始化，而不是实现。

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.

日期选择器确实更新了input值，但是不会触发验证，因为这不是验证插件期望的正常事件。仅在 submit、keyup 和 focusout 事件上触发验证，使用 .datepicker() 时不会发生这些情况>.

因此，您可以使用 the .valid() method 以编程方式强制进行验证测试只要你愿意...

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

演示:jsfiddle.net/nkvpsumq/2/

.valid() 可以附加到单个 input、select、textarea 或整个表单。当附加到包含多个对象的选择器时，必须使用 jQuery .each() 封装此方法。在您的情况下，不需要 .each() ，因为您已经在自定义规则中使用 this.element() 以编程方式重新触发对立字段的验证。现在您已经了解了如何通过 .datepicker() 事件触发 .valid() 方法，您可能希望稍微重构一下其余的代码。