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

Reply via email to