[jQuery] Re: Validate and erroneous "display:none"
Being more of a "designer" than a coder, I'm having trouble with
this. I've not been able to find any examples of errorPlacement or
showErrors that seem to apply in this situation. I don't understand
what you mean by adding a different class to the actual label -- would
I still be able to use highlight and unhighlight, or is that my
problem? I apologize for my ignorance. Thanks for your help so far,
I'll keep researching and experimenting...
LVR
On Jun 30, 11:09 am, "Jörn Zaefferer" <[EMAIL PROTECTED]>
wrote:
> Don't add the error class to thelabel. The validation plugin searches
> for the errorlabelbased on that error class - adding it to the
> actuallabelcauses thelabelto disappear.
>
> You could add a different class to the actuallabelso that the errorlabelcan
> be hidden or removed entirely (via errorPlacement, or
> showErrors).
>
> Jörn
>
> On Mon, Jun 30, 2008 at 6:35 PM, LVR <[EMAIL PROTECTED]> wrote:
>
> > I'm having a consistent problem with labels disappearing on keyup
> > using theValidateplug-in. All of the functionality of thevalidate
> > plug-in is there -- it works great. But elements are jumping around
> > on the page!
>
> > When a field is invalid, the "labelfor" tag turns thelabelred and
> > bold. So far, so good. When the info becomes valid as it's entered,
> > the wholelabeldisappears. I think style="display:none;" is being
> > applied to thelabel. In my case, the css I use causes the form field
> > to jump to the left, taking the place of thelabel. Subsequent key-up
> > strokes (if they are used/needed) cause thelabelelement to re-appear
> > and the form field to jump back into place.
>
> > I'm using the most current versions of jQuery and theValidateplug-
> > 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:
>
> >
> > $(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);
> > }
> > });
> > });
> >
>
> > Typical form elements:
>
> > •First Name:
> > > class="required" value="" />
> > •Last Name:
> > > class="required" value="" />
>
> > Thanks...
> > LVR
[jQuery] Re: Validate and erroneous "display:none"
I was hoping to actually use the label to denote the invalid field by
making it (the label) red and bold. This part does in fact work
great. It's when the entry in the field becomes valid on key-up that
the display:none makes the label disappear. Is there a way to simply
eliminate the display:none from the equation? I'd like to avoid
adding other error labels, if possible.
Thanks for your help...
LVR
On Jun 30, 11:09 am, "Jörn Zaefferer" <[EMAIL PROTECTED]>
wrote:
> Don't add the error class to the label. The validation plugin searches
> for the error label based on that error class - adding it to the
> actual label causes the label to disappear.
>
> You could add a different class to the actual label so that the error
> label can be hidden or removed entirely (via errorPlacement, or
> showErrors).
>
> Jörn
>
> On Mon, Jun 30, 2008 at 6:35 PM, LVR <[EMAIL PROTECTED]> wrote:
>
> > 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:
>
> >
> > $(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);
> > }
> > });
> > });
> >
>
> > Typical form elements:
>
> > •First Name:
> > > class="required" value="" />
> > •Last Name:
> > > class="required" value="" />
>
> > Thanks...
> > LVR
[jQuery] Re: Validate and erroneous "display:none"
Don't add the error class to the label. The validation plugin searches
for the error label based on that error class - adding it to the
actual label causes the label to disappear.
You could add a different class to the actual label so that the error
label can be hidden or removed entirely (via errorPlacement, or
showErrors).
Jörn
On Mon, Jun 30, 2008 at 6:35 PM, LVR <[EMAIL PROTECTED]> wrote:
>
> 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:
>
>
> $(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);
> }
> });
> });
>
>
> Typical form elements:
>
> •First Name:
> class="required" value="" />
> •Last Name:
> class="required" value="" />
>
> Thanks...
> LVR
>
