使用jQuery验证插件的Bootstrap

Question

我正在尝试使用jQuery验证插件为我的表单添加验证，但是当我使用输入组时，该插件会将错误消息放置在错误的位置。

$('form').validate({
    rules: {
        firstname: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        lastname: {
            minlength: 3,
            maxlength: 15,
            required: true
        }
    },
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    }
});

我的代码：http://jsfiddle.net/hTPY7/4/

- Miguel Borges

---

继承了一个带有Bootstrap 3的应用程序，当我最后一次继承一个具有Bootstrap 3的应用程序时，笑着发现我多年前已经收藏了它。 - Adrian J. Moreno

Answer 1

为了与 Twitter Bootstrap 3 完全兼容，我需要覆盖一些插件的方法：

// override jquery validate plugin defaults
$.validator.setDefaults({
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

查看示例：http://jsfiddle.net/mapb_1990/hTPY7/7/

- Miguel Borges

---

非常好用，只是想提醒添加$(element).removeClass(errorClass);以取消高亮显示和$(element).addClass(errorClass);以高亮显示，如果您希望成功不使用Bootstrap help-block类。 - Jay Rizzi

除了一个小问题，这个功能很好用：当使用jQuery Validate 1.11.1进行测试并在表单的验证器上调用resetForm()时，将不会调用无效元素上的unhighlight函数，因此在重置表单时需要手动删除has-error类。我的做法是直接调用以下函数而不是直接调用验证器的resetForm()函数：function resetForm(form_id) { $(form_id).find(".form-group").removeClass("has-error"); $(form_id).data('validator').resetForm(); } - Adrian Lopez

如果您像Bootstrap建议的那样有单选按钮（放置在标签标记内的单选输入），则需要将类似于以下内容添加到该if块中：else if (element.prop('type') === 'radio') { error.insertBefore(element.parent().parent()); } - Elliot Cameron

Answer 2

为了与 Bootstrap 3 完全兼容，我添加了对 input-group、radio 和 checkbox 的支持，这在其他解决方案中缺少。

更新于 2017 年 10 月 20 日：查看了其他答案的建议，并增加了对 radio-inline 特殊标记的支持，更好地将多个单选框或复选框分组并放置错误，同时增加了支持自定义 .novalidation 类以防止控件验证。希望这有所帮助，并感谢您的建议。

在包含验证插件后添加以下调用：

$.validator.setDefaults({
    errorElement: "span",
    errorClass: "help-block",
    highlight: function (element, errorClass, validClass) {
        // Only validation controls
        if (!$(element).hasClass('novalidation')) {
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        // Only validation controls
        if (!$(element).hasClass('novalidation')) {
            $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
        }
    },
    errorPlacement: function (error, element) {
        if (element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        }
        else if (element.prop('type') === 'radio' && element.parent('.radio-inline').length) {
            error.insertAfter(element.parent().parent());
        }
        else if (element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
            error.appendTo(element.parent().parent());
        }
        else {
            error.insertAfter(element);
        }
    }
});

这适用于所有Bootstrap 3表单类。如果您使用水平表单，则必须使用以下标记。这确保help-block文本尊重form-group的验证状态（“has-error”等）。

<div class="form-group">
    <div class="col-lg-12">
        <div class="checkbox">
            <label id="LabelConfirm" for="CheckBoxConfirm">
                <input type="checkbox" name="CheckBoxConfirm" id="CheckBoxConfirm" required="required" />
                I have read all the information 
            </label>
        </div>
    </div>
</div>

- Andreas Krohn

---

我调整了 errorClass: "help-block error-help-block"。我已经在使用 .help-block 来显示常规帮助信息，但这会覆盖表单验证消息。添加第二个类使其独特，因此现在它会附加而不是覆盖我的“真正”帮助消息。 - Scott Stafford

未调用Hilight方法。 - Vlado Pandžić

你好Vlado，你能否提供更多信息，为什么它对你不起作用？ - Andreas Krohn

对于一组单选按钮，这将在第一个选项下方添加错误消息，看起来很奇怪。您可能希望调整此设置以不同方式处理单选按钮。 - Elliot Cameron

我不得不在我的复选框标签中添加 width: 100%; 才能使其正常工作，否则消息会紧贴在它旁边。 - Bruno Peres

Answer 3

我只使用基于Twitter Bootstrap 3的表单设计。我设置了默认函数来验证并且仅使用规则运行验证方法。我使用FontAweSome的图标，但是你也可以像文档示例中一样使用Glyphicons。

jQuery.validator.setDefaults({
    highlight: function (element, errorClass, validClass) {
        if (element.type === "radio") {
            this.findByName(element.name).addClass(errorClass).removeClass(validClass);
        } else {
            $(element).closest('.form-group').removeClass('has-success has-feedback').addClass('has-error has-feedback');
            $(element).closest('.form-group').find('i.fa').remove();
            $(element).closest('.form-group').append('<i class="fa fa-exclamation fa-lg form-control-feedback"></i>');
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        if (element.type === "radio") {
            this.findByName(element.name).removeClass(errorClass).addClass(validClass);
        } else {
            $(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback');
            $(element).closest('.form-group').find('i.fa').remove();
            $(element).closest('.form-group').append('<i class="fa fa-check fa-lg form-control-feedback"></i>');
        }
    }
});

完成。运行验证函数后：

$("#default-register-user").validate({
    rules: {
        'login': {
            required: true,
            minlength: 5,
            maxlength: 20
        },
        'email': {
            required: true,
            email: true,
            minlength: 5,
            maxlength: 100
        },
        'password': {
            required: true,
            minlength: 6,
            maxlength: 25
        },
        'confirmpassword': {
            required: true,
            minlength: 5,
            maxlength: 25,
            equalTo: "#password"
        }
    }
});

JSFiddle示例

- DARK_DIESEL

---

希望有一个JSFiddle来展示这个。 - kofifus

请问您能否发布一下您用于截图的HTML代码？Fiddle示例中没有红色样式的错误消息和图标。谢谢！ - Christopher Francisco

Christopher Francisco，我更新了 JSFiddle 示例并添加了 Font Awesome CSS。 - DARK_DIESEL

你的解决方案很好！你怎么修改代码，只让有规则的字段显示成功或失败的消息呢？现在你的代码会让所有字段都显示CSS，无论是否有规则。 - Michael Smith

解决方案是在规则上方添加：'ignore: ".ignore, :hidden"'。然后只需将“ignore”类添加到您不想验证的所有字段即可。 - Michael Smith

电子邮件验证未正常工作。你可以输入像 asga@da 这样没有域名结尾的内容，它会被接受。这是因为输入目标“email”设置在引号中 - 必须将其省略 - 然后它才能正常工作。 - Hexodus

Answer 4

在Miguel Borges上面的答案中，您可以通过在突出显示/取消突出显示代码块中添加以下行来为用户提供绿色的成功反馈。

    highlight: function(element) {
        $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
    }

- Jose Apollo

Answer 5

这是您需要的解决方案，您可以使用errorPlacement方法来覆盖错误消息的放置位置。

$('form').validate({
    rules: {
        firstname: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        lastname: {
            minlength: 3,
            maxlength: 15,
            required: true
        }
    },
    errorPlacement: function(error, element) {
        error.insertAfter('.form-group'); //So i putted it after the .form-group so it will not include to your append/prepend group.
    }, 
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    }
});

这对我来说就像魔法一样有效。干杯！

- Drixson Oseña

---

error.insertAfter('.form-group'); 将错误信息放在所有的 .form-group 中。虽然它向我展示了这个想法，但还是感谢您。 - Miguel Borges

Answer 6

对于Bootstrap 4，我用得很好。

    $.validator.setDefaults({
    highlight: function(element) {
        $(element).closest('.form-group').find(".form-control:first").addClass('is-invalid');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').find(".form-control:first").removeClass('is-invalid');
        $(element).closest('.form-group').find(".form-control:first").addClass('is-valid');

    },
    errorElement: 'span',
    errorClass: 'invalid-feedback',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

希望这能帮到您！

- Jehad Ahmad Jaghoub

---

这个非常好用！我只添加了 validClass: 'valid-feedback'。 - Simon Zyx

Answer 7

在给表单添加验证时，我使用以下方法：

// Adding validation to form.
        $(form).validate({
            rules: {
                title: {
                    required: true,
                    minlength: 3,
                },
                server: {
                    ipAddress: true,
                    required: true
                }   
            },
            highlight: function(element) {
                $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            },
            success: function(element) {
                $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
            },
            errorClass: 'help-block'
        });

当使用jquery验证库时，我在Bootstrap 3样式方面遇到问题，以下内容对我有效：

- Edwin Perez

Answer 8

我用这个来做收音机：

    if (element.prop("type") === "checkbox" || element.prop("type") === "radio") {
        error.appendTo(element.parent().parent());
    }
    else if (element.parent(".input-group").length) {
        error.insertAfter(element.parent());
    }
    else {
        error.insertAfter(element);
    }

这样错误会在最后一个单选框选项下方显示。

- Marcel Overdijk

---

非常简单明了的答案，谢谢 - 我只需将额外的类型子句插入到我的现有errorPlacement逻辑中即可。 - theotherdy

Answer 9

我知道这个问题是关于Bootstrap 3的，但是由于一些与Bootstrap 4相关的问题被重定向到这个问题作为重复项，所以这里提供一个适用于Bootstrap 4的代码片段：

$.validator.setDefaults({
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-danger');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-danger');
    },
    errorElement: 'small',
    errorClass: 'form-control-feedback d-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else if(element.prop('type') === 'checkbox') {
            error.appendTo(element.parent().parent().parent());
        } else if(element.prop('type') === 'radio') {
            error.appendTo(element.parent().parent().parent());
        } else {
            error.insertAfter(element);
        }
    },
});

这几个区别是：

• 使用has-danger类代替has-error
• 更好的错误定位方式适用于单选框和复选框

- martpie

---

Bootstrap 4不再具有.has-*类。https://getbootstrap.com/docs/4.3/migration/#forms-1 - Fred

Answer 10

Bootstrap 4 beta相对于alpha版本以及Bootstrap 3有很大的变化，特别是在表单验证方面。

首先，为了正确地放置图标，您需要添加样式，这与Bootstrap 3中的样式相同，但在Bootstrap 4 beta中已不再适用...以下是我使用的样式：

.fa.valid-feedback,
.fa.invalid-feedback {
    position: absolute;
    right: 25px;
    margin-top: -50px;
    z-index: 2;
    display: block;
    pointer-events: none;
}

.fa.valid-feedback {
    margin-top: -28px;
}

随着beta版的使用，“状态”取代了类，因此您发布的代码没有反映出这一点，所以您上面的代码可能无法正常工作。无论如何，您需要在成功或高亮/取消高亮回调中向表单添加“was-validated”类。

$(element).closest('form').addClass('was-validated');

我建议使用新的元素和类来处理表单控件的帮助文本。

errorElement: 'small',
errorClass: 'form-text invalid-feedback',

- user2030404