[jQuery] Validate and erroneous "display:none"

[jQuery] Validate and erroneous "display:none"


I'm having a consistent problem with labels disappearing on keyup
using the Validate plug-in. All of the functionality of the validate
plug-in is there -- it works great. But elements are jumping around
on the page!
When a field is invalid, the "label for" tag turns the label red and
bold. So far, so good. When the info becomes valid as it's entered,
the whole label disappears. I think style="display:none;" is being
applied to the label. In my case, the css I use causes the form field
to jump to the left, taking the place of the label. Subsequent key-up
strokes (if they are used/needed) cause the label element to re-appear
and the form field to jump back into place.
I'm using the most current versions of jQuery and the Validate plug-
in. I'm using XHTML Strict. This behavior occurs on all platforms
and browsers I've tested. Thanks in advance for any help...
Here's my code:
<script type="text/javascript">
$(document).ready(function(){
$("#register").validate({
highlight: function(element, errorClass) {
$(element).addClass(errorClass);
$(element.form).find("label[for=" + element.id
+"]").addClass(errorClass);
},
unhighlight: function(element, errorClass) {
$(element).removeClass(errorClass);
$(element.form).find("label[for=" + element.id
+"]").removeClass(errorClass);
}
});
});
</script>
Typical form elements:
<label for="first"><span class="rqd">&bull;</span>First Name:</label>
<input name="first" id="first" size="25" maxlength="50"
class="required" value="" /><br />
<label for="last"><span class="rqd">&bull;</span>Last Name:</label>
<input name="last" id="last" size="25" maxlength="50"
class="required" value="" /><br />
Thanks...
LVR