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

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();

login.login_user(username, password);

}

});

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({

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');

}

});