[jQuery] Validate form labels disappear
First, let me say my skill level with jQuery and javascript is low.
Apparently too low to figure this out. I am currently using the
Validate plugin for form validation. It works well, except for this
problem: when an element validates, the label element disappears.
I'm using the following code straight from this page :
http://docs.jquery.com/Plugins/Validation/validate#toptions
$(".selector").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);
}
});
My goal is to use the labels as error indicators, turning them red on
error. The code above, together with some css, works great for this.
But when the error is corrected, the label disappears completely (the
Validate plugin adds display:none to the label tag).
To correct this Jorn said:
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).
I have tried this to the best of my limited ability - without
success. Can anyone give me a coded example of this? Should I not be
using the code sample above? I can't figure out how to highlight the
label on error, but not "add the error class to the label." Again,
I'm somewhat javascript-challenged, so code examples would be
appreciated.
Thanks!
[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] 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:
$(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:
•Last Name:
Thanks...
LVR
[jQuery] Re: Replacing elements when validate successful
That's awesome! It's working as expected now. Thanks for the reply,
you made my day!!
I changed ".style.display = 'inline'; " to ".css({display:"inline"});"
which also helped. I also noticed that the resulting page, which
relied on the php variable $_POST[formname] being present didn't
function, so I put in a hidden field and passed that instead. This
was my first post and I'm very impressed!
Thanks to all...
...LV
On Jun 21, 8:25 am, "Jörn Zaefferer" <[EMAIL PROTECTED]>
wrote:
> You got two calls to validate, try this instead.
>
> $(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);
>},
>
> submitHandler: function(form) {
>$('#SubmitFormBtn').style.display = 'none';
>$('#PleaseWait').style.display = 'inline';
>form.submit();
>}
>
> });
> });
>
> Jörn
>
> On Sat, Jun 21, 2008 at 1:07 PM, LVR <[EMAIL PROTECTED]> wrote:
>
> > I'm using the 'Validate' plugin for simple form validation - using
> > 'highlight' and 'unhighlight'. That part is working (though sometimes
> > the label elements disappear totally - but that's another issue).
> > What I'm trying to accomplish is this: When the form is valid, I want
> > to replace the submit button with an animated gif while the form is
> > submitting. From what I've read, I need a submitHandler. I'm a
> > novice at js and even more so with jQuery. Can anyone tell me what's
> > wrong with this 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);
> >}
> > });
>
> > $("#register").validate({
> >submitHandler: function(form) {
> >$('#SubmitFormBtn').style.display = 'none';
> >$('#PleaseWait').style.display = 'inline';
> >form.submit();
> >}
> > });
>
> > });
>
> > Thanks!
> > ...LV
[jQuery] Replacing elements when validate successful
I'm using the 'Validate' plugin for simple form validation - using
'highlight' and 'unhighlight'. That part is working (though sometimes
the label elements disappear totally - but that's another issue).
What I'm trying to accomplish is this: When the form is valid, I want
to replace the submit button with an animated gif while the form is
submitting. From what I've read, I need a submitHandler. I'm a
novice at js and even more so with jQuery. Can anyone tell me what's
wrong with this 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);
}
});
$("#register").validate({
submitHandler: function(form) {
$('#SubmitFormBtn').style.display = 'none';
$('#PleaseWait').style.display = 'inline';
form.submit();
}
});
});
Thanks!
...LV
