Change color of input labels with jquery validate

Question

I'm trying to change the class of my form input labels when a specific field fails to validate. I want to add the 'error' class to the spans directly above any invalid form elements.

This is what my HTML looks like:

<span class="label">What kind service do you need?</span><br />
<div style="float: left; width: 220px; margin: 5px 21px 0 0;"><input type="checkbox" name="serviceType"><label>Option 1</label></div>
<div style="float: left; width: 220px; margin: 5px 21px 0 0;"><input type="checkbox" name="serviceType"><label>Option 2</label></div>
<div style="float: left; width: 220px; margin: 5px 21px 0 0;"><input type="checkbox" name="serviceType"><label>Option 3</label></div>
<div style="float: left; width: 220px; margin: 5px 0 0 0;"><input type="checkbox" name="serviceType"><label>Option 4</label></div>
<div id="clear"></div>

<span class="label">When do you need service?</span><br />
<div id="inputSmall"><input type="text" class="small" name="serviceDate" /></div>

<span class="label">How often?</span><br />
<div id="inputSmall"><select class="small" name="recurringBasis">
<option value=""></option>
<option value="single">One time</option>
<option value="weekly">One a week</option>
</select></div>

And this is my JS:

$("#quote").validate({
  rules: {
    serviceDate: "required",
    recurringBasis: "required",
    serviceType: {
        required: true,
        minlength: 1            
    }
  },
  highlight: function(element) {
    $(element).prev('span').addClass("error");
  },
  unhighlight: function(element) {
    $(element).prev('span').removeClass("error");
  }
});

I've seen suggestions to use the highlight/unhighlight approach, but that doesn't appear to work. Any help would be greatly appreciated.

Arun P Johny · Accepted Answer · 2013-07-19 04:53:18Z

2

your selector $(element).prev('span') is wrong

Try

$(element).parent().prev().prev('span')

Demo: Fiddle

edited Jul 19, 2013 at 4:53

answered Jul 19, 2013 at 4:29

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

6 Comments

Jeremy Over a year ago

I tried using $(element).parent().prev('span').addClass("error"); and that doesn't appear to work.

Arun P Johny Over a year ago

@Jeremy it was not working because the prev() element was `<br />

Jeremy Over a year ago

That worked great. However, I have a couple checkboxes in the form that aren't validating with this approach. I believe it's because they have a different number of elements between themselves and the label. Please seem my update.

Arun P Johny Over a year ago

@Jeremy can you modify the fiddle with the case and post a link

Jeremy Over a year ago

Ok, so I played around with it in the fiddle and it works fine. I think the problem is caused with a custom checkbox script that I'm running that adds a bunch of HTML to the checkboxes after the fact for style purposes. Would there be any way of doing this that doesn't require us to know the exact .prev() position of the span?

|

Collectives™ on Stack Overflow

Change color of input labels with jquery validate

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related