jQuery 验证插件和 Bootstrap 4

Question

我正在使用 jQuery validation plugin 进行 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);
    }
});

因此，对于每个函数，我发现自己都在重复这些属性。有没有一种方法可以使用 "extending" 验证库，这样我就不必在每次使用验证时都重复 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

所描述的设置默认值将适用于 bootstrap 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);
        }
    },
});

jQuery 验证插件和 Bootstrap 4

jQuery validation plugin and Bootstrap 4

jquery

jquery-validate

bootstrap-4