[jQuery] Validate: Custom highlighting behaves strangely with validate 1.3
I am using the validate plugin on my project to highlight fields with
errors in them. I am using custom error highlighting functions, as
the default ones didn't suit my needs. Instead of adding a text
message to associated labels, my custom handler adds a class to the
invalid element's parent and removes it when the element is valid.
Code below:
function validateHighlight (elem)
{
$(elem).parent ().addClass ('formerr');
}
function validateUnHighlight (elem)
{
$(elem).parent ().removeClass ('formerr');
}
function validateErrorMsg ()
{
}
jQuery.validator.setDefaults (
{
errorPlacement : validateErrorMsg,
highlight : validateHighlight,
unhighlight : validateUnHighlight
});
I had a set of CSS rules for .formerr to produce the highlighting
effects I wanted.
This all worked great with validate 1.2.1, but I've run into problems
with it in 1.3. If I try to submit a form with multiple errors, all
the elements with invalid content get highlighted as with the old
validate. However, as soon as I click anywhere on the page, all of
the fields except for the last one in the form lose their
highlighting. As I click through the affected fields they all remain
unhighlighted except for the last one to have focus.
This is really aggravating, as it's counter-intuitive. All the fields
should remain highlighted until the error in the field is corrected.
I would stick with the old validation library, but I need the dynamic
rules feature of 1.3 for some of the new features of my project that
involve forms being generated dynamically.
I'm not sure if there is a bug in the new validate code, or if there
is a known behaviour change that breaks my highlighting, but either
way I'd like to get this resolved.