[英]jQuery validation date range issue
我的代码中有很多点,我有一对相关的开始和结束日期字段(范围)。 我需要验证开始是在结束日期之前。 我正在使用jQuery验证插件。
这是我的代码: 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
}
});
});
我想这样做,以便每当一个日期字段发生变化时,我会进行检查以确保范围有效(例如,开始<结束)。
我遇到的是,如果我输入有效范围,然后将结束日期的年份更改为开始日期之前的年份,它将清除开始日期的错误,但不清除错误在结束日期字段中。 我已调试并进入dateAfter方法并看到它返回true! 我甚至可以(没有进一步修改字段值)点击提交按钮然后错误清除并且表单提交。
知道为什么不清除它吗?
编辑为了进一步阐明我正在重现的步骤:
啊,想通了(或者至少解决了这个问题)。 验证插件可能不会设计为允许在给定字段的方法的运行中验证第二个字段。 可能存在对当前正在验证的字段的内部引用,因此您需要以串行方式进行验证而不是重叠它们。
我在这里添加了一个更新,你可以看到使用setTimeout确保'other field'在第一个确实解决问题之后验证: http : //jsfiddle.net/jinglesthula/dESz2/3/
this.element(end);
变
setTimeout($.proxy(
function () {
this.element(end);
}, this), 0);
我还添加了一个setTimeout来清除'validation.running'标志,以确保在'other'字段验证之后它不会被清除。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.