JQuery Validate - Add/remove error css class in the form

Question

I want to add/remove the error css class in the form.

$("#my-form").validate({
        invalidHandler: function (event, validator) {
            // 'this' refers to the form
            var errors = validator.numberOfInvalids();
            if (errors) {
                $(this).addClass("error");
            } else {
                $(this).removeClass("error");
            }
        },
});

Problem with this approach: When I use $("#my-form").validate().form() to validate the form, it will automatically add/remove the error css-class to each of the controls such as an input. By adding invalidHandler this additionally will add/remove the error css-class of the whole form.

Once I do validator.resetForm() to clear the messages, this will reset the css-class from the children controls but not from the form. I wish it automatically removes the css-class from the form by using a binding or any other sort of handler that trigger this action (removing the css-class from the form).

How I can fix this problem?

Source: http://jqueryvalidation.org/validate/

Update Here a silly example: http://jsfiddle.net/F2Re4/ and I manually remove the class (in this example, I called the class: 'error-form')

Not sure what you're taking about. The error class is automatically added and removed by default. — Sparky
– Sparky, Commented Nov 8, 2013 at 23:23
that is only happen to each element that we are validating but not to the form. — Jaider
– Jaider, Commented Nov 8, 2013 at 23:29
I have no idea what you want. Create a jsFiddle demo of what you have so far so I can sort this out. — Sparky
– Sparky, Commented Nov 8, 2013 at 23:32

Sparky · Accepted Answer · 2013-11-11 18:55:55Z

Looking at the markup of your jsFiddle,

<input type="button" onclick="validate()" value="Validate"></input>
<input type="button" onclick="resetForm()" value="Reset Form"></input>

1) input elements do not have a closing tag. They may or may not need to be "self-closing" depending on your doctype, but there is never any such thing as an </input> tag.

2) Inline JavaScript is ugly and unnecessary when you use jQuery. onclick handlers can easily be removed and replaced with jQuery .on('click')...

$('#reset').on('click', function () {
    var form = $("#myForm");
        form.validate().resetForm();
});

3) You do not need a validate function attached to your "validate" button. Simply change the button into a type="submit" and it will be validated automatically. Otherwise, you would need another .on('click') handler and a .valid() within to trigger a validation test.

<input type="submit" id="validate" value="Validate" />
<input type="button" id="reset" value="Reset Form" />

Quote OP:

... validator.resetForm() to clear the messages, but this invalidHandler is never called and the 'error' css class still there in the form.

As per documenation, invalidHandler is only called when the form is invalid. If you reset the form, the form is no longer invalid. Therefore, the logic used within your invalidHandler is flawed.

var errors = validator.numberOfInvalids();
if (errors) {
    $(this).addClass("form-error");
} else {
    // this will never be called because invalidHandler
    // is never called when there are no form errors
    //$(this).removeClass("form-error");
}

There is nothing in this plugin that will automatically add/remove the class of the <form> element itself. The plugin only automatically adds/removes classes from the various data input elements. Therefore, if you manually add a class to the <form> element, then you're going to have to manually remove it when you reset the form.

$(document).ready(function () {

    $("#myForm").validate({
        // your rules & options
    });

    $('#reset').on('click', function () {
        var form = $("#myForm");
            form.validate().resetForm();    // reset validation on form
            form.removeClass("form-error"); // remove error class from form
    });

});

DEMO: http://jsfiddle.net/F2Re4/11/

Tim Vermaelen · Accepted Answer · 2013-11-09 02:47:03Z

0

Use .valid() to test the form. See the click function for valid()

validate = function(){
    $("#myForm").valid();
};

resetForm = function(){
    var form = $("#myForm").validate();
    form.resetForm();
};

DEMO: http://jsfiddle.net/tive/U2XKx/

Additionally use reset() as seen on w3schools to clear the text value.

edited Nov 9, 2013 at 2:47

answered Nov 9, 2013 at 2:39

Tim Vermaelen

7,0792 gold badges27 silver badges39 bronze badges

Collectives™ on Stack Overflow

JQuery Validate - Add/remove error css class in the form

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related