jQuery 验证日期范围问题

我的代码中有很多地方有成对的相关开始和结束日期字段（范围）。我需要验证开始日期早于结束日期。我正在使用 jQuery 验证插件。

这是我的代码：http://jsfiddle.net/jinglesthula/dESz2/ http://jsfiddle.net/jinglesthula/dESz2/

Markup:

<form id="myform">
  <input type="text" name="startDate" id="startDate" class="validDate" />
  <br/>
  <input type="text" name="endDate" id="endDate" class="validDate" />
  <br/>
  <input type="submit" />
</form>

js:

$(function() {
  // simple date mm/dd/yyyy format
  $.validator.addMethod('validDate', function(value, element) {
    return this.optional(element) || /^(0?[1-9]|1[012])[ /](0?[1-9]|[12][0-9]|3[01])[ /][0-9]{4}$/.test(value);
  }, 'Please provide a date in the mm/dd/yyyy format');

  $.validator.addMethod('dateBefore', function(value, element, params) {
    // if end date is valid, validate it as well
    var end = $(params);
    if (!end.data('validation.running')) {
        $(element).data('validation.running', true);
        this.element(end);
        $(element).data('validation.running', false);
    }
    return this.optional(element) || this.optional(end[0]) || new Date(value) < new Date(end.val());

  }, 'Must be before corresponding end date');

  $.validator.addMethod('dateAfter', function(value, element, params) {
    // if start date is valid, validate it as well
    var start = $(params);
    if (!start.data('validation.running')) {
        $(element).data('validation.running', true);
        this.element(start);
        $(element).data('validation.running', false);
    }
    return this.optional(element) || this.optional(start[0]) || new Date(value) > new Date($(params).val());

  }, 'Must be after corresponding start date');
  $('#myform').validate({ // initialize the plugin
    rules: {
        startDate: {dateBefore: '#endDate', required: true},
        endDate: {dateAfter: '#startDate', required: true}
    },
    submitHandler: function (form) { // for demo
        alert('valid form submitted'); // for demo
        return false; // for demo
    }
  });
});

我想做到这一点，以便每当一个日期字段发生变化时，我都会进行检查以确保范围有效（例如开始

我遇到的问题是，如果我输入有效范围，然后将结束日期的年份更改为开始日期年份的前一年，它将清除开始日期的错误，但不会清除错误在结束日期字段上。我已经调试并进入了 dateAfter 方法，看到它返回 true！我什至可以（无需进一步修改字段值）点击提交按钮，然后错误清除并提交表单。

知道为什么不清除它吗？

edit为了进一步澄清我正在采取的重现步骤：

1. 在开始字段中输入 01/01/2014（第一个）
2. 在结束字段中输入 01/01/2015
3. 将结束字段年份中的 5 更改为 3
4. 选择 3 并再次输入 5
5. 开始字段清除了错误，但结束仍然抱怨范围开始/结束
6. 单击或跳出以模糊结束字段 - 仍然没有清除错误
7. 单击结束字段
8. Shift+Tab返回起始字段
9. 结束字段现在（终于）清除错误消息（您也可以提交表单以查看它清除结束字段错误）
10. 哇？ 0 wai ??!!!!!!???!???!!!111!!!一个!!!!11!!!1!!!

啊，弄清楚了（或者至少解决了问题）。验证插件的设计可能不允许在给定字段的方法运行中验证第二个字段。可能存在对当前正在验证的字段的内部引用，因此您需要串行进行验证而不是重叠验证。

我在此处添加了对小提琴的更新，您可以在其中看到使用 setTimeout 来确保“其他字段”在第一个字段确实解决问题后验证：http://jsfiddle.net/jinglesthula/dESz2/3/ http://jsfiddle.net/jinglesthula/dESz2/3/

this.element(end);

becomes

setTimeout($.proxy(
  function () {
    this.element(end);
  }, this), 0);

我还添加了一个 setTimeout 来清除“validation.running”标志，以确保在“其他”字段验证之前它不会被清除。