CODEWITHSUNDEEP
javascriptjqueryformsjquery-validate
Jaider
Jaider

Reputation: 14944

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

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

Upvotes: 0

Views: 9510

Answers (2)

Sparky
Sparky

Reputation: 98748

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/

Upvotes: 1

Tim Vermaelen
Tim Vermaelen

Reputation: 7069

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.

Upvotes: 0

Related Questions