jquery.validate showErrors() 触发了多次？

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() 处理程序被调用了多个（许多很多）次。

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

updated jsfiddle:

https://jsfiddle.net/1nnqf7qs/

Answer 1

我认为你需要使用

onfocusout: false

总是触发警报，因为 focus out 总是触发警报。

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

Answer 2

jquery.validate showErrors() triggered multiple times?

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

Now my problem is, when I run the page via browser, after clicking submit button, the page keeps popping up alert box recursively, which makes me believe that showErrors() handler is called multiple (many many) times.

它与 how/when 有关 alert() 停止所有 JavaScript 执行直到它被取消 ，并且 how/when 某些浏览器处理 alert()。 （我曾看到 Safari 陷入无限循环的警报，其中 console.log() 会触发一次。）

这可以通过简单地将 alert() 替换为 console.log() 来证明，您可以看到 showErrors 每个触发事件实际上只触发一次 .²

演示：jsfiddle.net/1nnqf7qs/1/

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

²EDIT：初始表单验证后（"lazy"变为"eager"验证后），当您单击按钮，然后触发两个事件... focusout 和 click 并且 showErrors 函数相应地通过触发两次（这两个不同事件中的每一个事件一次）来响应。

Is there a way to solve this problem ?

不要使用 alert() 进行开发和故障排除，请改用 console.log()。

参见：console.log() versus alert()

否则，我认为 showErrors 函数的触发方式没有问题。

你还需要把你的 Ajax INSIDE submitHandler 函数 .validate() 方法。 As per docs, this is where it belongs.

$("#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;
    }
});

然后一旦进入 submitHandler，您就不再需要检查表单是否有效，因为 submitHandler 仅在表单有效时触发。

jquery.validate showErrors() 触发了多次？

jquery.validate showErrors() triggered multiple times?

javascript

ajax

jquery

jquery-validate

jquery-forms-plugin