jQuery Validation plugin: add/remove class to/from element's error container

Question

I'm working with the jQuery Validation plugin and I wrote the following code which adds a class to the element's (<input>) parent (<label>) if not valid, as well as inserting the actual error element (<span>) before the <br>.

the HTML ...

<label>
    text<br><input>
</label>

... and the jQuery.

$("#form_to_validate").validate({
    rules: {
    ...
    },
    errorElement: "span",
    errorPlacement: function(error, element) {
        element.parent().addClass('error');
        error.insertBefore(element.parent().children("br"));
    }
});

So, if a form element doesn't validate, it turns into:

<label class="error">
    text<span>error text</span><br><input>
</label>

This works great, however, if a field's content is corrected and becomes valid, the class obviously doesn't get removed from its parent (actually, neither does the error element, instead it just gets a display: none; CSS property). How can I check if an element becomes valid and remove its parent class if so ?

Any help would be greatly appreciated !

Edited: Added more information.

Valentin Flachsel · Accepted Answer · 2012-06-13 22:46:10Z

30

After some more heavy digging I found the answer right under my nose, but unfortunately for me, well hidden. The plug-in has a built-in highlighting function (surprise, surprise). Normally it would highlight/unhighlight the element, but it can easily be converted to work on the element's parent:

$("#form_to_validate").validate({
    rules: {
    ...
    },
    errorElement: "span",
    errorPlacement: function(error, element) {
        error.insertBefore(element.parent().children("br"));
    },
    highlight: function(element) {
        $(element).parent().addClass("error");
    },
    unhighlight: function(element) {
        $(element).parent().removeClass("error");
    }
});

I hope this will help someone !

edited Jun 13, 2012 at 22:46

answered Mar 24, 2010 at 5:13

Valentin Flachsel

10.8k10 gold badges46 silver badges67 bronze badges

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

Comments

John Conde · Accepted Answer · 2012-12-12 02:51:56Z

0

errorElement: 'none' worked for me.

edited Dec 12, 2012 at 2:51

John Conde

220k100 gold badges464 silver badges504 bronze badges

answered Sep 18, 2010 at 13:53

chris

1

Collectives™ on Stack Overflow

jQuery Validation plugin: add/remove class to/from element's error container

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related