Removing styles from jQuery.validator after successful validation

Question

I have the following code which adds custom css styles to my form when using the jQuery validation plugin.

$(document).ready(function() {
    jQuery.validator.setDefaults({
        errorPlacement: function(error, element) {

        // Adds the red outline
        element.parent().addClass("error");

        // Adds the red cross
        element.siblings(".error_status").addClass('check');

        // Removes the default error
        element.removeClass("error");
        }       
    });

 $("#form").validate();

});

Which styles the following html for each element:

<div class="row">
    <label for="id-3"><span>Email address:</span><span class="mark">*</span>
    <input type="text" class="text required" id="id-3" name="email"/>
    <span class="error_status"></span>
</div>

The problem I'm having is that I don't know how to subsequently remove the styles after a successful validation.

What do you mean with "remove the styles after a successful validation"? After a successful validation the data is sent to the server. Can you provide an example on jsFiddle.net? — Nicola Peluchetti
– Nicola Peluchetti, Commented Dec 23, 2011 at 11:07

Frédéric Hamidi · Accepted Answer · 2011-12-23 11:36:54Z

3

You might want to use the highlight and unhighlight callbacks (documented here) instead of errorPlacement. This way, you won't have to manually remove the error class from the element:

jQuery.validator.setDefaults({
    highlight: function(element, errorClass) {
        var $element = $(element);
        // Add the red outline.
        $element.parent().addClass(errorClass);
        // Add the red cross.
        $element.siblings(".error_status").addClass("check");
    },
    unhighlight: function(element, errorClass) {
        var $element = $(element);
        // Remove the red cross.
        $element.siblings(".error_status").removeClass("check");
        // Remove the red outline.
        $element.parent().removeClass(errorClass);
    }
});

edited Dec 23, 2011 at 11:36

answered Dec 23, 2011 at 11:11

Frédéric Hamidi

264k42 gold badges497 silver badges486 bronze badges

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

2 Comments

Nick D Over a year ago

Excellent that fixed it. However it seemed that element wasn't an element object but just the html? I fixed this by putting $(element).sib... rather than just element.sib

Frédéric Hamidi Over a year ago

You're right, the callbacks are indeed called with a DOM element and not a jQuery object. Answer updated accordingly, thank you for your feedback :)

Collectives™ on Stack Overflow

Removing styles from jQuery.validator after successful validation

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related