代码之家 › 专栏 › 技术社区 › Alex

jQuery验证插件和引导程序4

jquery-validate bootstrap-4 jquery

2

Alex · 技术社区 · 8 年前

我在用 jQuery validation plugin 我的js表单验证。我也在使用bootstrap4。我发现我需要修改 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);
    }
});

因此,对于每个函数,我发现自己都在重复这些属性。有没有一种方法可以“扩展”验证库,这样我就不必重复验证了 错误放置 , 突出 每次我使用验证代码?

2 回复 | 直到 8 年前

1

25

Josh Bernfeld 6 年前

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

2

7

AS Mackay Kushan Gowda 8 年前

所述的设置默认值将在引导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);
        }
    }
});

我唯一找不到的是,当输入字段出错时,如何将其颜色设置为红色,当输入字段正常时,如何将其颜色设置为绿色。也许有人能在我的答案中加上这个选项?

3

Community Mohan Dere 6 年前

上面的一个指标解决方案没有与错误标签所需的输入间距,使用下面的代码,看到最令人愉快的结果

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