JQuery验证resetForm不起作用

Question

我有一个非常简单的问题：有一个带有clear form 按钮的表单。当我单击它时，所有字段都会重置。但我还有一个额外的验证规则：至少应该填写一个额外的字段。清除后，它们当然都是空的，但我不想看到这些验证消息。我希望它清除整个表单，隐藏所有验证消息等等。这是我的代码：

$("a[data-clear]").click(function (event) {
    var now = new Date();
    $("#report_search section:gt(0) input").val("");
    $("#includeDerived").prop("checked", true);
    $("#includeApp").prop("checked", true);
    $("#includeOrg").prop("checked", false);
    $("input[name='FromDate']").datepicker().datepicker("setDate", now.dateAdd("year", -1));
    $("input[name='ToDate']").datepicker().datepicker("setDate", now);
    $("form").validate().resetForm();
    event.preventDefault();
});

我在页面上只有一个表单，所以多个表单不是问题。

期望的结果：表单已清除，验证消息未显示。

实际结果：表单被清除，验证消息仍然存在。

---

检查字段是否填写的示例规则：

jQuery.validator.addMethod("isSufficientInfo",
    function (value, element, params) {
        var hasPersonInfo = $("input[name='LastName']").val() && $("input[name='FirstName']").val();
        if (hasPersonInfo) {
            return true;
        }
        var hasDocInfo = $("select[name='D']").val() && $("input[name='C']").val() && $("input[name='E']").val();
        if (hasDocInfo) {
            return true;
        }
        return $("input[name='A']").val() || $("input[name='B']").val();
    }, "File some fields");
$("#IsEnoughInfo").rules("add", { isSufficientInfo: "" });

Answer 1

如果您仍在寻找答案， 我怀疑$("form").validate() 创建了一个新的验证器实例。 你需要的是之前创建的实例：

$("form").data("validator").resetForm()

或者将验证器存储在一个变量中：

var v = $("form").validate()
v.resetForm()

Answer 2

错误原因

您的点击事件正在从按钮传播到窗口（由内而外）。这会导致您的表单触发验证，因此即使您调用 resetForm，您也会收到相同的错误消息。如果您逐步调试validation 库并到达this.hideErrors，那么您将看到当this.hideErrors 执行时，错误消息消失了。由于验证脚本尚未完成，它会继续执行其他语句，最后传播的事件由window 从内到外处理。当此事件触发表单上的请求时，再次显示错误消息。

解决方案

解决方法是将你对event.preventDefault()的电话移到顶部，如下图：

$("a[data-clear]").click(function (event) {
    event.preventDefault(); // Move to top

    var now = new Date();
    $("#report_search section:gt(0) input").val("");
    $("#includeDerived").prop("checked", true);
    $("#includeApp").prop("checked", true);
    $("#includeOrg").prop("checked", false);
    $("input[name='FromDate']").datepicker().datepicker("setDate", now.dateAdd("year", -1));
    $("input[name='ToDate']").datepicker().datepicker("setDate", now);

    $("form").validate().resetForm(); // this should work now
});

另见更新后的jsfiddle sample

试一试，让我知道这是否适合您。我做了一步一步的调试，得出了这个结论。