Javascript jQuery验证日期范围问题

Javascript jQuery验证日期范围问题,javascript,jquery,validation,jquery-validate,Javascript,Jquery,Validation,Jquery Validate,我的代码中有许多点,其中有成对的相关开始和结束日期字段(范围)。我需要验证开始日期是否早于结束日期。我正在使用jQuery验证插件 这是我的代码: 标记: <form id="myform"> <input type="text" name="startDate" id="startDate" class="validDate" /> <br/> <input type="text" name="endDate" id="endDate" c

我的代码中有许多点,其中有成对的相关开始和结束日期字段(范围)。我需要验证开始日期是否早于结束日期。我正在使用jQuery验证插件

这是我的代码:

标记:

<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:

$(函数(){
//简单日期mm/dd/yyyy格式
$.validator.addMethod('validDate',函数(值,元素){
返回此.optional(element)| |/^(0?[1-9]| 1[012])[/](0?[1-9]|[12][0-9]|[3[01])[/][0-9]{4}$/.test(value);
},“请以mm/dd/yyyy格式提供日期”);
$.validator.addMethod('dateBefore',函数(值、元素、参数){
//如果结束日期有效,也要验证它
var end=$(参数);
如果(!end.data('validation.running')){
$(元素).data('validation.running',true);
本.要素(完);
$(元素).data('validation.running',false);
}
返回this.optional(元素)| this.optional(end[0])| | new Date(value)new Date($(参数).val());
},“必须在相应的开始日期之后”);
$('#myform')。验证({//初始化插件
规则:{
startDate:{dateBefore:'#endDate',必填项:true},
endDate:{dateAfter:'#startDate',必需:true}
},
submitHandler:函数(表单){//用于演示
警报(“已提交的有效表单”);//用于演示
返回false;//用于演示
}
});
});
我希望这样,每当一个日期字段更改时,我都会进行检查以确保范围有效(例如,开始<结束)

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

你知道为什么它不能清除它吗

编辑进一步澄清我复制的步骤:

  • 在开始字段中输入2014年1月1日(第一个)
  • 在结束字段中输入2015年1月1日
  • 在年终字段中将5更改为3
  • 选择3并再次键入5
  • “开始”字段清除其错误,但“结束”仍在抱怨范围“开始/结束”
  • 单击或制表符以模糊结束字段-仍然没有清除错误
  • 单击结束字段
  • Shift+Tab返回开始字段
  • end field now(finally)清除错误消息(您也可以提交表单以查看是否清除end field错误)
  • 伟?0维??!!!!??!??!!!111!!!一个!!!!11!!!1!!! 啊,解决了(或者至少解决了这个问题)。验证插件的设计可能不允许在运行给定字段的方法时验证第二个字段。可能存在对当前正在验证的字段的内部引用,因此您需要以串行方式进行验证,而不是重叠验证

    我在这里为fiddle添加了一个更新,您可以看到使用setTimeout来确保在第一个字段确实解决了问题之后“其他字段”进行验证:

    变成

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

    我还为清除“validation.running”标志添加了一个setTimeout,以确保在“other”字段验证之前不会清除该标志。

    其他注意事项:我想要的是,当范围无效时,两个字段都将失效,一旦余额恢复,两个字段都将重新验证。数据('validation.running',bool)是为了避免无限循环。用户可以通过改变开始或结束来恢复原力的平衡。我无法用给出的步骤重现您的问题。结束消息在步骤7-8中不清楚。很抱歉造成混淆!我已经更新了步骤,以更好地反映我正在做的事情。事实上,结束消息没有被清除(并且在应该的时候没有这样做,即使我看到dateAfter方法运行并返回true),这就是问题所在。步骤5是首先演示问题的地方。步骤9是没有出现问题的地方(这让人沮丧,因为为什么它会在那里工作,而不是回到步骤5)。注意:proxy()调用是为了确保
    这个
    是正确的上下文,在本例中是验证器实例。
    
    this.element(end);
    
    setTimeout($.proxy(
      function () {
        this.element(end);
      }, this), 0);