带有警报弹出窗口的 jQuery 验证插件 - 仍然出现 - 用户无法在选择框中选择正确的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14801381/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Validate plugin with alert popup - still appears - the user can't choose correct value in select box
提问by JanZitniak
I'm using following code:
我正在使用以下代码：
$().ready(function() {
$('#state_form').validate({
rules: {
state: "required"
},
messages: {
state:
{
required: "The State is required!"
}
},
errorPlacement: function(error, element) {
alert(error.html());
}
});
});
but if the user submits the form then popup with error appears. This is correct. Then if the user clicks to the selectbox 'state' the popup with error still appears (is not possible choose correct value). The real example is available at janzitniak.info/temp/test.php
但如果用户提交表单，则会出现错误弹出窗口。这是对的。然后，如果用户单击选择框“状态”，仍然会出现错误弹出窗口（不可能选择正确的值）。实际示例可在janzitniak.info/temp/test.php
This is not acceptable. How could I resolve this problem?
这是不可接受的。我该如何解决这个问题？
The solution described at JQuery form validation with alert popup - alert still being shown with a valid submitdidn't help me, maybe I didn't understand that correctly.
带有警报弹出窗口的 JQuery 表单验证中描述的解决方案- 仍然显示有效提交的警报对我没有帮助，也许我没有正确理解。
回答by Sparky
Use the onclick: falseoptionto prevent the error from triggering before the state is selected. Also, you only need to use .text()instead of .html()because the alert()will not need to use the HTML anyway.
使用该onclick: false选项可防止在选择状态之前触发错误。此外，您只需要使用.text()而不是.html()因为alert()无论如何都不需要使用 HTML。
$(document).ready(function () {
$('#state_form').validate({
onclick: false, // <-- add this option
rules: {
state: "required"
},
messages: {
state: {
required: "The State is required!"
}
},
errorPlacement: function (error, element) {
alert(error.text());
}
});
});
Demo: http://jsfiddle.net/U6N3R/
演示：http: //jsfiddle.net/U6N3R/
CAUTION: Do not use this code in Safari or you will be stuck in an infinite loop. It seems like the alert()in Safari fires the errorPlacementcallback function a second time after clicking "ok" button.
注意：请勿在 Safari 中使用此代码，否则您将陷入无限循环。单击“确定”按钮后alert()，Safari 中似乎errorPlacement第二次触发回调函数。
For a more modern user experience, I recommend a jQuery modal or tooltip plugin instead.
为了获得更现代的用户体验，我推荐使用 jQuery 模式或工具提示插件。
See this answer as an example: https://stackoverflow.com/a/14741689/594235
回答by Jay Ram Singh
Some minor correction to stop infinite loop, use keyup: false as other option.
一些小的修正来停止无限循环，使用 keyup: false 作为其他选项。
$(document).ready(function () {
$('#state_form').validate({
onclick: false,
onkeyup: false,
rules: {
state: "required"
},
messages: {
state: {
required: "The State is required!"
}
},
errorPlacement: function (error, element) {
alert(error.text());
}
});
});
