плагин проверки 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);
    }
});

Таким образом, для каждой функции я повторяю эти свойства. Есть ли способ «расширения» библиотеки валидации, чтобы мне не приходилось повторять код errorPlacement, highlight и unhighlight каждый раз, когда я использую validate?

Answer 1

выше индикаторного решения не имеет желаемого интервала ввода с меткой ошибки, используйте код ниже и увидите наиболее приятный результат

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

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 = "form-control" в поле ввода. Единственное, что мне не удалось найти, - это как сделать поле ввода красным, если оно имеет ошибку, или зеленым, когда все в порядке. Может быть, кто-нибудь может добавить эту опцию в мой ответ?

Answer 3

Выше кода также будет отображаться значок глификона, но если мы не хотим отображать значок глифа, нам нужно использовать следующий код. Это сработало для меня.

errorElement: 'span',
                errorPlacement: function (error, element) {
                    jQuery(element).addClass('border border-danger');
                    element.closest('.form-group').addClass("has-danger").append(error).addClass("text-danger");
                },
                highlight: function (element, errorClass, validClass) {
                    jQuery(element).addClass('border border-danger');
                    jQuery(element).addClass('has-danger');
                },
                unhighlight: function (element, errorClass, validClass) {
                    jQuery(element).removeClass('border border-danger');
                    jQuery(element).removeClass('has-danger');
                }

Answer 4

Недостаточно ясно прочитал документы.

Решение:

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