Jquery 自定义日期验证器只工作一次答案

【问题标题】：Jquery custom date validator works only onceJquery 自定义日期验证器只工作一次
【发布时间】：2015-08-14 13:02:30
【问题描述】：

我在尝试向 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'
});

提前致谢

【问题讨论】：

标签： javascript jquery twitter-bootstrap jquery-validate bootstrap-datetimepicker

【解决方案1】：

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

});

【讨论】：