带有警报弹出窗口的 jQuery 验证插件 - 仍然出现 - 用户无法在选择框中选择正确的值

Question

我正在使用以下代码:

$().ready(function() {
    $('#state_form').validate({
        rules: {
            state: "required"
        },
        messages: {
            state: 
            {
                required: "The State is required!"
            }
        },          
        errorPlacement: function(error, element) {
            alert(error.html());
        }
    });
});

但是如果用户提交表单，则会出现带有错误的弹出窗口。这是对的。然后，如果用户单击选择框“状态”，仍然会出现带有错误的弹出窗口(不可能选择正确的值)。真实的例子可以在 janzitniak.info/temp/test.php 找到。

这是 Not Acceptable 。我该如何解决这个问题？

JQuery form validation with alert popup - alert still being shown with a valid submit中描述的解决方案没有帮助我，也许我没有正确理解。

Answer 1

使用onclick: false option以防止在选择状态之前触发错误。另外，您只需要使用 .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());
        }
    });
});

演示:http://jsfiddle.net/U6N3R/

警告:请勿在 Safari 中使用此代码，否则您将陷入无限循环。似乎 Safari 中的 alert() 在单击“ok”按钮后再次触发 errorPlacement 回调函数。

<小时/>

为了获得更现代的用户体验，我推荐使用 jQuery 模式或工具提示插件。

请参阅此答案作为示例:https://stackoverflow.com/a/14741689/594235