Question

如果验证失败，我想在顶部显示一条错误消息。我不想使用errorPlacement选项。相反，我想在Bootstrap警报中显示消息。

这是我的HTML：

<form method="POST" action="/role" accept-charset="UTF-8" id="roles_form">
    <div class="alert alert-danger vd_hidden">
        <span class="vd_alert-icon"><i class="fa fa-exclamation-circle vd_red"></i></span> 
        Please select a role.
    </div>
    <input id="role_administrator" name="role" type="radio" value="administrator">
    <label for="role_administrator">Administrator</label>
    <input id="role_manager" name="role" type="radio" value="manager"> 
    <label for="role_manager">Manager</label>
    <input type="submit" value="Submit">
</form>

这是我的JavScript：

var roles_form = $('#roles_form');
var error_roles_form = $('.alert-danger', roles_form);

roles_form.validate({
    focusInvalid: false, // do not focus the last invalid input
    debug: true,

    rules: {
        role: "required"
    },

    invalidHandler: function (event, validator) { //display error alert on form submit
        error_roles_form.fadeIn(500);
    },

});

这不起作用。它既没有进行任何验证（表单已提交，如果我删除了debug选项）也没有显示任何错误。

更新在查看Sparky提供的solution之后，我意识到我正在使用插件来隐藏无线电元素并替换为可以样式化的对象。由于隐藏了无线电元素，jQuery Validation无法使用我的JavaScript代码正确验证它们。让我感到惊讶的是，即使启用了调试模式，它也没有显示任何JavaScript错误。

Answer 1

引用OP：

＆＃34;这不起作用。也没有任何验证（表单已提交，如果我删除了debug选项），也没有显示任何错误。＆＃34;

实际上，您发布的代码正在运行：http://jsfiddle.net/TTJB7/

引用OP：

＆＃34;如果验证失败，我想在顶部显示一条错误消息。我不想使用errorPlacement选项。＆＃34;

要将错误消息放入框中，您需要the errorLabelContainer option。因此，errorPlacement不是将错误消息放在每个输入（errorLabelContainer）旁边的默认行为，而是将消息放入一个自动隐藏/显示的指定容器中。

var roles_form = $('#roles_form');
var error_roles_form = $('.alert-danger', roles_form);

roles_form.validate({
    focusInvalid: false, // do not focus the last invalid input
    debug: true,
    rules: {
        role: "required"
    },
    messages: {
        role: "Please select a role."
    },
    errorLabelContainer: error_roles_form  // puts the error messages into this container
});

HTML：

<form id="roles_form">
    <div class="alert alert-danger vd_hidden"></div>
    <input id="role_administrator" name="role" type="radio" value="administrator" />
    <input id="role_manager" name="role" type="radio" value="manager" />
    <input type="submit" value="Submit" />
</form>

DEMO：http://jsfiddle.net/TTJB7/1/

对于所有其他可用的回调选项see the documentation。

Answer 2

当我意识到实际问题是隐藏的无线电元素时，我做了一些研究并解决了这个问题。

首先，我将ignore应用于“”，以便它不会忽略hidden元素并对其进行验证。

然后我需要停止在元素后面出现的默认错误消息。所以我为该选项分配了一个空函数。

这是我的最终JavaScript代码：

roles_form.validate({
    focusInvalid: false, // do not focus the last invalid input
    ignore: "",

    rules: {
        role: "required"
    },

    invalidHandler: function (event, validator) { //display error alert on form submit
        error_roles_form.fadeIn(500);
    },

    errorPlacement: function(error, element) {}

});

使用jQuery Validation仅显示一个错误

2 个答案: