jQuery验证插件和Bootstrap 4 [英] jQuery validation plugin and Bootstrap 4

问题描述

我将 jQuery验证插件用于我的js表单验证.我还使用了Bootstrap4.我发现我需要修改errorPlacement，highlight和unhighlight来使其正确显示验证错误，以BS4样式显示.

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

因此，对于每个功能，我都会发现自己重复了这些属性.有没有一种扩展"验证库的方法，这样我每次使用validate时都不必重复errorPlacement，highlight和unhighlight代码?

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.

解决方案:

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

这篇关于jQuery验证插件和Bootstrap 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！