jQuery验证日期范围问题 [英] jQuery validation date range issue

问题描述

我的代码中有很多地方，在这些地方有成对的相关开始日期和结束日期字段(范围).我需要确认开始日期早于结束日期.我正在使用jQuery验证插件.

I have a number of spots in my code where I have pairs of related start and end date fields (range). I need to validate that the start is before the end date. I'm using the jQuery validation plugin.

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

Here's my code: http://jsfiddle.net/jinglesthula/dESz2/

标记:

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

我希望这样做，以便每当一个日期字段发生更改时，我都会进行检查以确保范围有效(例如，开始<结束).

I want to make it so that whenever one date field changes that I do a check to make sure the range is valid (e.g. start < end).

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

What I'm running into is that if I enter a valid range, then change the year of the end date to be the year prior to the year of the start date it will clear the error on the start date, but not clear the error on the end date field. I've debugged and stepped into the dateAfter method and seen it return true! I can even (without further modification of the field values) hit the submit button and then the error clears and the form submits.

有人知道为什么不清除它吗?

Any idea why it's not clearing it?

编辑，以进一步阐明我要复制的步骤:

edit To further clarify the steps I'm taking to reproduce:

1. 在开始字段(第一个)中输入2014年1月1日
2. 在结束字段中输入2015年1月1日
3. 在结束字段年份将5更改为3
4. 选择3，然后再次输入5
5. 开始字段清除了它的错误，但是结束仍然在抱怨范围开始/结束
6. 单击或跳出以模糊结束字段-仍无法清除错误
7. 点击结束字段
8. Shift + Tab 回到开始字段
9. 现在(最终)结束字段清除了错误消息(您也可以提交表单以查看它清除结束字段错误)
10. 围吗? 0 wai ?? !!!! ??！?? !!!!!! 111 !!!一个!!!! 11 !!! 1 !!!

1. Enter 01/01/2014 in the start field (the first one)
2. Enter 01/01/2015 in the end field
3. Change the 5 to a 3 in the end field year
4. Select the 3 and type 5 again
5. start field clears it's error, but end is still complaining about range start/end
6. click or tab out to blur the end field - still no clearing of error
7. click end field
8. Shift+Tab back to the start field
9. end field now (finally) clears error message (you could also submit the form to see it clear the end field error)
10. wai? 0 wai ??!!!!??!??!!!111!!!one!!!!11!!!1!!!

推荐答案

啊，想通了(或者至少解决了这个问题).验证插件可能未设计为允许在运行给定字段的方法内对第二个字段进行验证.可能有一个内部引用指向当前正在验证的字段，因此您需要以串行方式进行验证，而不是重叠进行验证.

Ah, figured it out (or at least solved the issue). The validation plugin was likely not designed to allow for validation of a second field within the running of a given field's method(s). Probably there's an internal reference to the field currently being validated, so you need to do the validations in serial rather than overlapping them.

我在此处为小提琴添加了一个更新，您可以在其中看到使用setTimeout确保在第一个确实清除了问题之后其他字段"有效的问题:

I've added an update to the fiddle here where you can see that using setTimeout to ensure that the 'other field' validates after the first indeed clears up the problem: http://jsfiddle.net/jinglesthula/dESz2/3/

this.element(end);

成为

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

我还添加了setTimeout来清除'validation.running'标志，以确保直到'other'字段生效后才将其清除.

I also added a setTimeout for the clearing of the 'validation.running' flag to ensure it doesn't get cleared until after the 'other' field validates.

这篇关于jQuery验证日期范围问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！