Question

在我的测试程序中，我使用jquery.validate插件来检查用户输入字段：

<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/jquery-form-3.51.min.js"></script>
<script src="js/jquery-validation-1.15.1/jquery.validate.min.js"></script>

<form id="form-profile" method="post">
    <input name="Age" type="text" />
    <input name="Gender" type="text" />
    <button type="submit">submit</button>
</form>

<script>
$(function() {
    setValidateRules();
});

function setValidateRules() {
    $("#form-profile").validate({
        rules: {
            Age: "required",
            Gender: "required"
        },
        messages: {
            Age: "Please fill in age",
            Gender: "Please fill in gender",
        },
        showErrors: function(errorMap, errorList) {
            alert(JSON.stringify(errorMap));
        }
    });
}

$("#form-profile").ajaxForm({
    dataType: "json",
    beforeSubmit: function(arr, $form, options) {
        return $("#form-profile").valid();
    },
    error: function(result) {
        // todo
    },
    success: function(result) {
        // todo
    }
});
</script>

现在我的问题是，当我通过浏览器运行页面时，单击提交按钮后，页面会不断弹出警告框，这让我相信showErrors（）处理程序被调用多次（很多次）。

有没有办法解决这个问题？

更新了jsfiddle：

https://jsfiddle.net/1nnqf7qs/

Answer 1

jquery.validate showErrors()多次触发？

真的不是。使用console.log()确认每个触发事件仅触发showErrors() 一个时间。对于您的演示，默认触发事件为提交按钮的click，以及每个文本focusout的{{1}}和keyup。¹

现在我的问题是，当我通过浏览器运行页面时，单击提交按钮后，页面会不断弹出警告框，这让我相信input处理程序被称为多次（很多次）。

它与 showErrors()暂停所有JavaScript执行直到被解除 的方式/时间有关，以及某些浏览器处理{{1}时的方式/时间}。 （我看到Safari陷入了一个无限循环的警报，其中alert()会在其位置发射一次。）

只需将alert()替换为console.log()就可以证明这一点，您可以看到alert() 实际上每次触发事件只触发一次。 ²

DEMO：jsfiddle.net/1nnqf7qs/1/

¹ 编辑：点击console.log()后，该字段会立即失去焦点（showErrors事件触发），从而触发另一个alert() 1}}将在第一个focusout解散时出现。无限循环。使用alert()时，该字段永远不会失去焦点，因此不会触发其他通知。

² 编辑：在初始表单验证之后（在“懒惰”变成“急切”验证之后），当您单击该按钮时，您将触发两个事件。 .. alert()和console.log()以及focusout函数通过触发两次（每两次不同事件一次）作出相应的响应。

有没有办法解决这个问题？

不使用click进行开发和疑难解答，请改用showErrors。

请参阅：console.log() versus alert()

否则，我发现alert()函数的触发方式没有问题。

您还需要将您的Ajax INSIDE 放在console.log()方法的showErrors函数中。 As per docs, this is where it belongs

submitHandler

然后，在.validate()内，您不再需要检查表单是否有效，因为$("#form-profile").validate({ rules: { Age: "required", Gender: "required" }, messages: { Age: "Please fill in age", Gender: "Please fill in gender", }, showErrors: function(errorMap, errorList) { console.log(JSON.stringify(errorMap)); }, submitHandler: function(form) { $(form).ajaxForm({ dataType: "json", beforeSubmit: function(arr, $form, options) { // form is ALREADY valid when submitHandler fires // return $("#form-profile").valid(); // <- do NOT need this here }, .... }); return false; } });仅在表单有效时触发。

Answer 2

我认为你需要使用

onfocusout: false

警报始终触发，因为焦点总是触发警报。

function setValidateRules() {
    $("#form-profile").validate({
        onfocusout: false,
        rules: {
            Age: "required",
            Gender: "required"
        },
        messages: {
            Age: "Please fill in age",
            Gender: "Please fill in gender",
        },
        showErrors: function(errorMap, errorList) {
            alert(JSON.stringify(errorMap));
        }
    });
}

API引用：https://jqueryvalidation.org/validate

jquery.validate showErrors（）多次触发？

2 个答案: