8

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

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?

3 Answers 3

29

Solution:

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

The set defaults as discribed will work on bootstrap 4 with the following :

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

dont forget to add the class class="form-control" to the input field. The only thing i was not able to find is how to get the input field colored red when it has an error or green when its ok. Maybe any can add that option to my answer ?

2
  • i've already found a solution about a few months ago. it is essentially the same.
    – Alex
    Nov 7, 2018 at 20:47
  • 2
    WRT green colouring if ok: this chaining should do that: jQuery(element).closest('.form-control').removeClass('is-invalid').addClass('is-valid')
    – MBaas
    Nov 15, 2018 at 17:44
7

above an indicator solution didn't have the desired input spacing with the error label, use the code below and see the most pleasant result

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);
        }
    },
});
2
  • 1
    Perfect! Thanks a lots. Nov 9, 2020 at 2:15
  • Far closer than the accepted answer, even today on Bootstrap 5 Jul 1, 2021 at 19:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.