Question

I’m using jQuery validation to validate a form with a radio button set on it (set = two radio buttons for this example). The radio buttons with labels are below. The form is on a jQueryUI dialog.

<input type="radio" name="chooseMe" value="Yes" id="radio_yes" /><label for="radio_yes">Yes</label>
<input type="radio" name="chooseMe" value="No" id="radio_no" /><label for="radio_no">No</label>

I grabbed the highlight/unhighlight code from the validation plugin page on jquery.com
http://docs.jquery.com/Plugins/Validation/validate
(go to the “Options” tab and search for “unhighlight”)

highlight: function (element, errorClass, validClass) {
    $(element).addClass(errorClass).removeClass(validClass);
    $(element.form).find("label[for=" + element.id + "]").addClass(errorClass);
},
unhighlight: function (element, errorClass, validClass) {
    $(element).removeClass(errorClass).addClass(validClass);
    $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
},

The first problem i’m having is when validated as required, only the “Yes” label is highlighted.
The second problem is if I don’t resolve the validation issue and cancel out of the jQueryUI dialog, then come back into the dialog, the “Yes” label disappears completely.

To resolve the first issue, what i want to do is highlight both the “Yes” and “No” labels. So, working on the highlight code, i would need to get the name of the input (“chooseMe”) from the element id, then from that name, for all the id’s associated with that name (“radio_yes” and “radio_no”), highlight all the labels. Of course, then there’s the converse for the unhighlight code.

Since i have several radio button sets in the form, i need this to be generic (no hardcoding “chooseMe”, etc.)

Does that sound reasonable? If so, the only problem is i don’t know how to do that 🙂

Thanks in advance.

jsFiddle as requested:
http://jsfiddle.net/Bd688/4/

Answer 1

Ok, this iteration of the jsfiddle highlights both labels:

http://jsfiddle.net/Bd688/6/

The idea is to get the name of the element and look for all the other elements of the same name, then apply the same code you were applying. So I just changed this:

$(element.form).find('[name='+element.name+']').each(function (i, sameName){
   $(element.form).find("label[for=" + sameName.id + "]").removeClass(errorClass); 
});

EDIT: Ok, so it turns out jQuery.validate doesn’t really like you using its errorClass and applying it to labels. I made another class and it seems to be working:

http://jsfiddle.net/Bd688/7/