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

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

JQuery验证resetForm不起作用

2 个答案:

错误原因

解决方案