Javascript jquery.validate淋浴错误（）是否多次触发？

在我的测试程序中，我使用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>

提交
$（函数（）{
setValidateRules（）；
});
函数setValidateRules（）{
$（“#表单配置文件”）。验证({
规则：{
年龄：“必需”，
性别：“必需”
},
信息：{
年龄：“请填写年龄”，
性别：“请填写性别”，
},
错误：功能（错误映射、错误列表）{
警报（JSON.stringify（errorMap））；
}
});
}
$（“#表单配置文件”）.ajaxForm({
数据类型：“json”，
提交前：函数（arr$表单、选项）{
返回$（“#表单配置文件”）.valid（）；
},
错误：函数（结果）{
//待办事项
},
成功：功能（结果）{
//待办事项
}
});

现在我的问题是，当我通过浏览器运行页面时，在单击“提交”按钮后，页面会不断递归地弹出警报框，这让我相信会多次（多次）调用淋浴rors（）处理程序

有没有办法解决这个问题

更新的JSFIDLE:

---

我想你需要使用

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参考：

我认为您需要使用

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参考：

jquery.validate

showErrors（）

是否多次触发

真的不是。使用

console.log（）。对于您的演示，默认触发事件是
单击提交按钮的
，以及每个文本的
输入
的
聚焦输出
和
键控
。1

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

它涉及到如何/何时
alert（）
停止所有JavaScript执行，直到它被解除为止，以及某些浏览器如何/何时处理
alert（）
。（我看到Safari陷入了一个无限的警报循环中，在这个循环中，一个
console.log（）
在它的位置会触发一次。）

这可以通过简单地将
警报（）

演示：

1编辑：单击
alert（）
时，该字段立即失去焦点（
focusout
事件激发），这会触发另一个
alert（）
，第一个
alert（）
解除后将立即出现。无限循环。使用
console.log（）
时，字段不会失去焦点，因此不会触发其他通知

2编辑：初始表单验证后（在“惰性”变成“急切”验证后），当您单击按钮时，您将触发两个事件
focusout
和
单击
，然后
showErrors
功能相应地触发两次（每两个不同事件触发一次）

有没有办法解决这个问题

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

见：

否则，我认为
showErrors
函数的启动方式没有问题


您还需要将Ajax放在
.validate（）
方法的
submitHandler
函数中

$（“#表单配置文件”）。验证({
规则：{
年龄：“必需”，
性别：“必需”
},
信息：{
年龄：“请填写年龄”，
性别：“请填写性别”，
},
错误：功能（错误映射、错误列表）{
log（JSON.stringify（errorMap））；
},
submitHandler:函数（表单）{
$（表单）.ajaxForm({
数据类型：“json”，
提交前：函数（arr$表单、选项）{
//表单在submitHandler激发时已有效
//返回$（“#表单配置文件”）.valid（）；//
jquery.validate
showErrors（）
是否多次触发

实际上不是。使用
控制台.log（）
确认每个触发事件只触发
淋浴器（）
一次。对于您的演示，默认触发事件是
单击提交按钮的
和
聚焦输出
和
键入每个文本的
输入
。1

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

它涉及到如何/何时
alert（）
停止所有JavaScript执行，直到它被解除，以及某些浏览器如何/何时处理
alert（）
（我看到Safari陷入了一个无限的警报循环中，一个
控制台.log（）
在它的位置会触发一次。）

这可以通过简单地将
警报（）

演示：

1编辑：单击
alert（）
时，该字段立即失去焦点（
focusout
事件激发），这会触发另一个
alert（）
，第一个
alert（）
解除.Infinite循环时，该事件将立即出现
，该字段不会失去焦点，因此不会触发其他通知

2编辑：在i之后