I'm trying to specify a couple of custom methods for highlighting/
unhighlighting valid/invalid fields on my form, but I'm getting some
strange behaviour, which I'm not sure is due to me misunderstanding
how these methods are supposed to be implemented, or if it's just
buggy.

My custom methods look like this:

        validateHighlightError = function(element) {
                $(element).parent().addClass('fail');
        };

        validateUnhighlightError = function(element) {
                $(element).parent().removeClass('fail');
        };

And then within the declaration of the validate method:

        $('form#signupForm').validate({
                highlight: validateHighlightError,
                unhighlight: validateUnhighlightError,
                rules: rulesBasicSignup,
                messages: messagesBasicSignup
        });

(with rules and messages objects also being specified elsewhere;
they're pretty straightforward though).

Now, what I'd expect to happen is that whenever a field is determined
to be invalid (initially when the whole form is submitted, but
subsequently on keystrokes or blur) the containing element to the
field (in my case, a DL) will either have a class of 'fail' added or
removed. But this isn't what is happening; in actual fact, the class
is removed immediately on blur from the field, regardless of whether
or not it is valid. The behaviour is confusing, since the way I'm
displaying errors hides the error message itself onblur so as to
concentrate the user on a single message at a time; basically it makes
it look like the field is valid, when actually it's not at all (and
tabbing/clicking back onto it will re-add the error class to the
containing element, further confusing matters).

The documentation for these two options is somewhat ambiguous:

         highlight:
         How to highlight invalid fields. Override to decide which fields and
how to highlight.

         unhighlight:
         Called to revert changes made by option highlight, same arguments as
highlight.

It doesn't seem clear to me if this means unhighlight is just intended
to have the opposite effect of highlight, or if it's supposed to be
called when an element is no longer considered invalid (which is what
I'd hope for).

Anybody able to shed some light on the matter?

~B

Reply via email to