带有altfields的jQuery UI Datepicker：validation不应该触发它

我的表单上有3个datepickers（startdate，enddate和duedate），所选的日期打印在各自的altfields中。 我有日期validation规则设置来validationaltfields中的值而不是datepickers本身（我尝试在datepickers上validation，但它没有做任何事情）。

唯一的规则是它们是必需的，并且enddate和duedate必须大于startdate。

如果我选择一个等于startdate的endate或duedate，我没有按预期得到任何validation错误，直到我点击提交按钮或者如果我将焦点放到altfield然后点击走（焦点丢失）。

有没有办法在datepicker中选择日期时手动validation这些输入？

这是演示

这是代码：

HTML：

       * { font-family: Verdana; font-size: 96%; } label { width: 10em; float: left; } label.error { float: none; color: red; padding-left: .5em; vertical-align: top; } p { clear: both; } .submit { margin-left: 12em; } em { font-weight: bold; padding-right: 1em; vertical-align: top; } .ui-widget { font-size: 1em; } .ui-slider-horizontal { display: inline-block; width: 30em; } .ui-slider-vertical { display: inline-block; float: left; margin: 0em 2em 1em 0em; }  
 
 
Add a New Goal
 Start Date: 
 
 
 
  
 
 
 End Date: 
 
 
 
  
 
 
 Due Date: 
 
 
 
  
 
 
  
  

JS：

 $(document).ready(function () { $("#newusergoal").validate({ rules: { startdate: { required: true }, enddate: { required: true, greaterThan: "#startdate" }, duedate: { required: true, greaterThan: "#startdate" } }, messages: { startdate: { required: "Goal must have a start date" }, enddate: { required: "Goal must have an end date", greaterThan: "End date must be greater than the start date" }, duedate: { required: "Goal must have an due date", greaterThan: "Due date must be greater than the start date" } } }); $("#startdateselect").datepicker({ minDate: 0, maxDate: "10Y", dateFormat: "yy-mm-dd", hideIfNoPrevNext: true, showButtonPanel: true, changeMonth: true, changeYear: true, altField: "#startdate" }); $("#enddateselect").datepicker({ minDate: 0, maxDate: "10Y", dateFormat: "yy-mm-dd", hideIfNoPrevNext: true, showButtonPanel: true, changeMonth: true, changeYear: true, altField: "#enddate" }); $("#duedateselect").datepicker({ minDate: 0, maxDate: "10Y", dateFormat: "yy-mm-dd", hideIfNoPrevNext: true, showButtonPanel: true, changeMonth: true, changeYear: true, altField: "#duedate" }); jQuery.validator.addMethod( "greaterThan", function (value, element, params) { if (!/Invalid|NaN/.test(new Date(value))) { return new Date(value) > new Date($(params).val()); } return isNaN(value) && isNaN($(params).val()) || (Number(value) > Number($(params).val())); }, 'Must be greater than {0}.'); }); 

Answer 1

引用OP ：“有没有办法手动validation这些输入……？”

使用.element()以编程方式触发单个元素的validation测试。

 $("#myform").validate().element("#myfield"); 

http://docs.jquery.com/Plugins/Validation/Validator/element#element

演示 ： http ： //jsfiddle.net/vMNsy/

此演示显示如何使用.element()在DOM ready事件的第一个字段上触发validation测试。 您可以使用自己的自定义事件或函数来调用它。

有关更具体的内容，请参阅此答案

https://stackoverflow.com/a/4635640/594235

 $("#myfield").datepicker({ onClose: function() { $("myform").validate().element("#myfield"); } }); 

编辑 ：根据评论， onClose事件不适用于OP，但为了其他人的利益而留下代码。