Geek Answers Handbook

Confirm jQuery radio station - highlight all shortcuts for radio

I use jQuery validation to validate a form with a radio button set on it (for this example, two radio buttons are set). Below are switches with inscriptions. The form is in the jQueryUI dialog box.

<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 / non-address code from the validation plugin page at jquery.com http://docs.jquery.com/Plugins/Validation/validate
(go to the "Options" tab and find "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 encountered is when it is checked as necessary, only the “Yes” mark is highlighted.
The second problem is that if I do not solve the validation problem and do not cancel the jQueryUI dialog, return to the dialog, the “Yes” label will completely disappear.

To solve the first problem, I want to highlight the "Yes" and "No" labels. So, working on the selection code, I will need to get the input name ("selectMe") from the identifier of the element, then from this name, for the entire identifier associated with this name ("radio_yes" and "radio_no"), select all the labels. Of course, then there is feedback for the noise-free code.

Since I have several sets of radio buttons in the form, I need this to be common (without hardcoding "chooseMe", etc.)

Does that sound reasonable? If so, the only problem is that I do not know how to do this :)

Thanks in advance.

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

+4
source share
1 answer

Ok, this jsfiddle iteration highlights both labels:

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

The idea is to get the name of the element and look for all other elements with the same name, and then apply the same code that you apply. 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: Okay, so it turns out that jQuery.validate doesn't really like it when you use your errorClass and apply it to shortcuts. I made another class and it seems to work:

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

+6
source

More articles:


All Articles