jQuery 验证插件和 Bootstrap 4

Question

我正在使用jQuery验证插件进行js表单验证。我也在使用Bootstrap 4。我发现我需要修改errorPlacement、highlight和unhighlight，以便验证错误以 BS4 样式正确显示。

$('#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);
}
});

因此，对于每个函数，我发现自己都在重复这些属性。有没有办法"扩展"验证库，这样我就不必在每次使用 validate 时重复errorPlacement、highlight和unhighlight代码？

Answer 1

解决方案：

https://jqueryvalidation.org/jQuery.validator.setDefaults/

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

Answer 2

所述的设置默认值将在引导程序 4 上工作，如下所示：

jQuery.validator.setDefaults({
highlight: function(element) {
jQuery(element).closest('.form-control').addClass('is-invalid');
},
unhighlight: function(element) {
jQuery(element).closest('.form-control').removeClass('is-invalid');
},
errorElement: 'span',
errorClass: 'label label-danger',
errorPlacement: function(error, element) {
if(element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
});

不要忘记将 class class="form-control" 添加到输入字段中。 我唯一找不到的是如何在输入字段出现错误时将其着色为红色，在正常时将其着色为绿色。也许任何人都可以将该选项添加到我的答案中？

Answer 3

指标解决方案上方没有带有错误标签的所需输入间距，请使用下面的代码并查看最令人愉快的结果

jQuery.validator.setDefaults({
onfocusout: function (e) {
this.element(e);
},
onkeyup: false,
highlight: function (element) {
jQuery(element).closest('.form-control').addClass('is-invalid');
},
unhighlight: function (element) {
jQuery(element).closest('.form-control').removeClass('is-invalid');
jQuery(element).closest('.form-control').addClass('is-valid');
},
errorElement: 'div',
errorClass: 'invalid-feedback',
errorPlacement: function (error, element) {
if (element.parent('.input-group-prepend').length) {
$(element).siblings(".invalid-feedback").append(error);
//error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
},
});