尝试向jQuery.validator添加自定义验证方法时,我遇到了一个问题:
$.validator.addMethod("fromDate", function (value, element) {
var fromDateTime = moment(value, 'm/dd/yyyy HH:mm');
var toDateTime = moment($("#endDate").val(), 'm/dd/yyyy HH:mm');
if (fromDateTime.isValid() && toDateTime.isValid()) {
return toDateTime.diff(fromDateTime) > 0;
}
return false;
}, "Start datetime should be less than end datetime");
$('#queryingDateForm').on('submit', function (e) {
e.preventDefault();
$('#queryingDateForm').validate({
rules: {
start: {
required: true,
fromDate: true
}
},
submitHandler: function (form) {
load();
}
});
});
这行代码只能在第一次正常工作,因此验证只能运行一次。
return toDateTime.diff(fromDateTime) > 0;
第二次等等,它返回第一次返回的值。
Html:
<form id="queryingDateForm">
<div class="input-group input-daterange">
<input class="form-control dateTimePicker" id="startDate" type="datetime" placeholder="Date Start" name="start" required />
<span class="input-group-addon">@QueryingResources.To</span>
<input class="form-control dateTimePicker" id="endDate" type="datetime" placeholder="Date End" name="end" required />
<div class="input-group-btn">
<button type="submit" class="btn btn-success searchQuery" id="searchDateBtn">@QueryingResources.Search</button>
</div>
</div>
</form>
这就是bootstrap datetimepicker的初始化方式:
$(".dateTimePicker").datetimepicker({
autoclose: true,
format: 'm/dd/yyyy hh:ii'
});
提前致谢
答案 0 :(得分:2)
.validate()
方法仅用于初始化插件。
使用下面的版本,在验证插件初始化之前,表单已经在提交过程中。
$('#queryingDateForm').on('submit', function (e) {
e.preventDefault();
$('#queryingDateForm').validate({ ....
如何在启动提交事件后进行验证
如果没有首次初始化插件,如何进行验证?
您永远不会将.validate()
方法放在submit
事件(或click
事件)处理程序中。
该插件已自动捕获点击并阻止表单的提交。它只是在DOM就绪事件处理程序中的页面加载中调用...
$(document).ready(function () {
$.validator.addMethod("fromDate", function (value, element) {
// your function
....
});
$('#queryingDateForm').validate({ // initialize the plugin
// your options
....
});
});