[英]jquery.validate showErrors() triggered multiple times?
In my test program, I use jquery.validate plugin to check user input fields as so: 在我的测试程序中,我使用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>
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. 现在的问题是,当我通过浏览器运行页面时,单击“提交”按钮后,页面将递归地弹出警报框,这使我相信showErrors()处理函数被调用了多次(很多次)。
Is there a way to solve this problem ? 有办法解决这个问题吗?
updated jsfiddle:
更新了jsfiddle:
https://jsfiddle.net/1nnqf7qs/ https://jsfiddle.net/1nnqf7qs/
jquery.validate
showErrors()
triggered multiple times?jquery.validate
showErrors()
多次触发?
It's really not. 真的不是。 Using
console.log()
confirms that each triggering event only fires showErrors()
one time. 使用
console.log()
确认每个触发事件仅触发showErrors()
一次 。 For your demo, default triggering events are click
of submit button, and focusout
and keyup
of each text input
. 为了您的演示,默认触发事件是
click
提交按钮,以及focusout
和keyup
每个文本的input
。 1 1个
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.现在的问题是,当我通过浏览器运行页面时,单击“提交”按钮后,页面将递归地弹出警报框,这使我相信
showErrors()
处理函数被调用了多次(很多次)。
It has to do with how/when alert()
halts all JavaScript execution until it's dismissed , and how/when certain browsers handle the alert()
. 它与如何/何时
alert()
停止所有JavaScript执行直到被关闭 ,以及某些浏览器如何/何时处理alert()
。 (I've seen Safari get stuck in an infinite loop of alerts where a console.log()
in its place would have fired one time.) (我已经看到Safari卡在了一个无限的警报循环中,
console.log()
会被触发一次。)
This can be proven by simply replacing your alert()
with a console.log()
and you can see showErrors
is really only fired ONE time per each triggering event . 这可以通过简单地用
console.log()
替换alert()
来证明,并且可以看到showErrors
实际上每个触发事件仅触发一次 。 2 2
DEMO: jsfiddle.net/1nnqf7qs/1/ 演示: jsfiddle.net/1nnqf7qs/1/
1 EDIT : When the alert()
is clicked, the field immediately loses focus ( focusout
event fires), which triggers another alert()
that will appear as soon as the first alert()
dismisses. 1个 编辑 :当
alert()
被点击,字段立即失去焦点( focusout
事件触发),这将触发另一个alert()
将尽快出现第一个alert()
驳回。 Infinite loop. 无限循环。 When using
console.log()
, the field never loses focus so no additional notifications are triggered. 使用
console.log()
,该字段不会失去焦点,因此不会触发其他通知。
2 EDIT : After initial form validation (after "lazy" turns into "eager" validation), when you click the button, you are then triggering TWO events... focusout
and click
and the showErrors
function responds accordingly by firing twice (once per each of these two different events). 2 编辑 :初始表单验证后(“懒惰”变为“急切”验证之后),当您单击按钮时,您将触发两个事件...
focusout
并click
,并且showErrors
函数会通过两次触发相应地响应(每次这两个不同事件中的每一个)。
Is there a way to solve this problem ?
有办法解决这个问题吗?
Do not use an alert()
for development and troubleshooting, use console.log()
instead. 不要将
alert()
用于开发和故障排除,而应使用console.log()
。
See: console.log()
versus alert()
请参阅:
console.log()
与alert()
Otherwise, I see no problem with how the showErrors
function is being fired. 否则,我看不到如何触发
showErrors
函数。
You also need to put your Ajax INSIDE the submitHandler
function of the .validate()
method. 你也需要把你的Ajax 内
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;
}
});
Then once inside the submitHandler
, you no longer need to check if the form is valid, because the submitHandler
only fires when the form is valid. 然后,一旦进入
submitHandler
,您就不再需要检查表单是否有效,因为submitHandler
仅在表单有效时才触发。
I think you need to use 我认为你需要使用
onfocusout: false
Alert always fire because focus out always fire for alert. 警报总是会触发,因为聚焦始终会触发警报。
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 refernce : https://jqueryvalidation.org/validate API参考: https ://jqueryvalidation.org/validate
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.