6

我正在使用以下代码：

$().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 获得

这是不可接受的。我该如何解决这个问题？

JQuery form validation with alert popup中描述的解决方案- 仍然显示有效提交的警报对我没有帮助，也许我没有正确理解。

4

2 回答 2

9

使用该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());
        }
    });
});

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

注意：请勿在 Safari 中使用此代码，否则您将陷入无限循环。似乎alert()SafarierrorPlacement在单击“确定”按钮后第二次触发回调函数。

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

以这个答案为例： https ://stackoverflow.com/a/14741689/594235

于 2013-02-10T19:22:48.060 回答
0

一些小的修正以停止无限循环，使用 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());
    }
});
});
于 2016-12-24T17:33:42.027 回答