jquery validate css not applying to one form field

Question

I've been working for the last day to get my CSS all nice and intuitive for a registration form and I'm down to just one problem I can't seem to get past.

My for ID is contactForm and I have a couple of general CSS rules setup to apply a visual cue on the input or select to let the person know if the values are accepted:

#contactForm input.error, select.error  {border: 1px solid #AB000B; background-color:#FFF2F2}   
#contactForm input.valid, select.valid  {border: 1px solid #3D993D; background-color:#E2FEDF}

These are the generic error and valid that the validate plugin uses.

I think also style a green checkbox (valid) or a red error message to the right of the input:

highlight: function(label) {
    $(label).addClass('error');
},
success: function(label) {
    label.text('OK').addClass('valid');
},

CSS for those is:

#contactForm.jqv1 label.valid {
   width: 16px;
   background: url("../images/tick.png") center center no-repeat;
   display: inline-block;
   text-indent: -9999px;
}
#contactForm.jqv1 label.error {
   font-weight: bold;
   color: red;
}

The .jqv1 class is applied to the whole form to override some #contactForm defaults that are in use on other pages in the site.

Everything works as expected except for one form field. If I enter a username that's in use I'll get the #contactForm input.error style (red border lite red background) and the #contactForm.jqv1 label.error (bold red message to the right). If I enter a valid username I'll get the opposite - green border and green check mark.

However - if I enter an invalid username then switch to a valid one I'll get the green check mark but the input field doesn't get the "class=valid" to trigger the green border. It also does the same in reverse (valid to invalid username keeps the border green even though I get the red error message).

The other fields work fine - if I correct an invalid entry I'll get the green border and green check mark. The validate rule for the one that is problematic does use a remote:

sp_user: {
                required: true,
                rangelength: [4,50],
                remote: {
                    cache:false,
                    async:false,
                    url: compath + "/rmtUserCFC.cfc?method=checkUsernameRemote&returnformat=json",
                    type: "post"
                }
            },

Any suggestions on what I can do to get this one last little CSS bug squashed?

Barmar · Accepted Answer · 2012-12-17 20:22:59Z

1

Try:

highlight: function(label) {
    $(label).addClass('error').removeClass('valid');
},
success: function(label) {
    label.text('OK').addClass('valid').removeClass('error');
},

Adding the new class doesn't remove the old class, so you have elements with both classes.

answered Dec 17, 2012 at 20:22

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Steve Over a year ago

That caused this selector to be skipped: #contactForm.jqv1 label.valid {} so my check mark appears on the wrong side and the 'OK' text is on the screen.

Collectives™ on Stack Overflow

jquery validate css not applying to one form field

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related