jQuery Validator Plugin - update custom error messages

Question

I'm using the jQuery Validator plugin successfully on a form. This form is a widget, so space constraints are tight. For that reason, I don't want to show the normal error messages after each form field that doesn't validate.

Rather, for each form field, I have a label, and inside the labels of required fields, I have an <em> with the text '(required)' in it. If the user tries to submit without filling out all fields, I add .css('color', '#F00') to the <em>s of the empty fields, to highlight which fields need to be filled out. That works great, so far.

Now what I need to know is, what event do I use to set an <em> back to black if the user enters data into the associated required field?

I change the <em>s to red like this, currently:

errorPlacement: function(error, element) {
    jQuery(element).prev().children('em').css('color', '#F00');
}

Answer 1

Maybe look at using the highlight/unhighlight options -- these seem to be designed to do the sort of thing you're interested in. The plugin calls highlight when an invalid condition triggers, then automatically calls unhighlight when the user corrects the invalid input.

You may also need to specify errorPlacement, if only to prevent the plugin form displaying the standard error message.