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?