bootstrap 报错验证插件_jQuery验证插件和Bootstrap 4

weixin_39692253

于 2021-01-14 16:16:36 发布

阅读量151

点赞数

文章标签： bootstrap 报错验证插件

本文链接：https://blog.csdn.net/weixin_39692253/article/details/112952004

版权

这篇博客讲述了如何在使用jQuery验证插件进行表单验证时，结合Bootstrap4的样式来定制错误信息的显示。通过设置默认错误元素、错误定位、元素高亮和去高亮的函数，实现了与Bootstrap4风格一致的错误反馈。示例代码展示了如何避免重复编写这些函数，从而提高代码复用性。

摘要由CSDN通过智能技术生成

I'm using jQuery validation plugin for my js form validation. I am also using Bootstrap 4. I've found that I needed to modify errorPlacement, highlight, and unhighlight to make it so that the validation errors properly show up in the BS4 style.

$('#login-form').validate({

rules: {

login_username: {

required: true

login_password: {

required: true

}

errorElement: 'span',

errorPlacement: function (error, element) {

error.addClass('invalid-feedback');

element.closest('.form-group').append(error);

highlight: function (element, errorClass, validClass) {

$(element).addClass('is-invalid');

unhighlight: function (element, errorClass, validClass) {

$(element).removeClass('is-invalid');

submitHandler: function (form) {

neou_cms.remove_error_messages();

var username = form.elements['login_username'].value;

var password = CryptoJS.SHA512(form.elements['login_password'].value).toString();

}

});

Thus for every function I find myself repeating those properties. Is there a way of "extending" the validation library so that I don't have to repeat the errorPlacement, highlight, and unhighlight code every time I use validate?

解决方案

Didn't read the docs clearly enough.

Solution:

jQuery.validator.setDefaults({