jquery validate avoid add errorClass to input [duplicate]

Question

The validate plugin on error also adds errorClass to input field. How to avoid this?

var validator = $("#contacts_form").validate({
        submitHandler: function(form) {
            form.submit();  //Must be called here,
        },
        errorElement: "p",
        errorClass : 'form-item-validation',
        rules: {
            name: "required",
            website: {
                required: true,
                minlength: 5
            },
            email: {
                required: true,
                email: true
            },
            onchange: true
        },
        messages: {
            name: "Please enter your firstname",
            email: {
                email: "Please enter a valid email address"
            }
        }
    });

You could set it to an empty string, however it's worth noting that the same class is applied to the form controls as it is to the label elements. Therefore if you need them to be different, that's not possible. I'm not sure why you'd need to avoid the class on the form elements anyway. Just amend the CSS rules if it's a UI issues — Rory McCrossan
– Rory McCrossan, Commented Mar 17, 2020 at 10:21
@RoryMcCrossan well, errorClass : 'form-item-validation' has styles and thats breaks all, I only need add error class to the message container but not to the input — Oleksandr IY
– Oleksandr IY, Commented Mar 17, 2020 at 10:23
'form-item-validation' has styles and thats breaks all in that case just change the CSS as you need. — Rory McCrossan
– Rory McCrossan, Commented Mar 17, 2020 at 10:24
@RoryMcCrossan its not a case to change css, I didn't create them and I don't know who will add or replace them — Oleksandr IY
– Oleksandr IY, Commented Mar 17, 2020 at 10:38
I presume onchange is not one of your field names? Please note that only field names followed by their methods go inside of the rules object, so basically, onchange: true makes absolutely no sense inside there. Secondly, onchange is not even an option for this plugin: jqueryvalidation.org/?s=onchange — Sparky
– Sparky, Commented Mar 17, 2020 at 17:41

Oleksandr IY · Accepted Answer · 2020-03-17 11:29:49Z

0

My solution is add to the settings

        showErrors: function(errorMap, errorList) {
            this.defaultShowErrors();
            $('input').removeClass('form-item-validation');
        },

answered Mar 17, 2020 at 11:29

Oleksandr IY

3,1867 gold badges36 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sparky Over a year ago

Actually, highlight and unhighlight are the two options you should use for adding and removing classes during validation.

Oleksandr IY Over a year ago

showErrors does it too actually or there are some hidden stones?

Sparky Over a year ago

Look at the source code. The two I mentioned already are the methods for reliably adding/removing classes at the proper validation events.

Collectives™ on Stack Overflow

jquery validate avoid add errorClass to input [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related