Saturday, 15 January 2011

jQuery validation: one radio button in any of several groups -



jQuery validation: one radio button in any of several groups -

i've got form 3 sets of radio buttons, let's say:

<input type="radio" name="answer_option1" value="1" id="ans_options1" /> <input type="radio" name="answer_option1" value="2" id="ans_options2" /> <input type="radio" name="answer_option1" value="3" id="ans_options3" /> <input type="radio" name="answer_option1" value="4" id="ans_options4" /> <input type="radio" name="answer_option2" value="5" id="ans_options5" /> <input type="radio" name="answer_option2" value="6" id="ans_options6" /> <input type="radio" name="answer_option2" value="7" id="ans_options7" /> <input type="radio" name="answer_option2" value="8" id="ans_options8" /> <input type="radio" name="answer_option3" value="9" id="ans_options9" /> <input type="radio" name="answer_option3" value="10" id="ans_options10" /> <input type="radio" name="answer_option3" value="11" id="ans_options11" /> <input type="radio" name="answer_option3" value="12" id="ans_options12" />

the form should pass validation (in jqueryvalidation.org sense) if 1 of these 12 radios selected. able create work usual methods of hanging "require" classes of 1 sort or off buttons, individual groups, not across groups -- selecting radio in grouping 1 still lead complaints missing selections in groups 2 , 3. dallied require_from_group, doesn't seem much better. thoughts? thanks!

quote op:

"the form should pass validation if 1 of these 12 radios selected. ..."

"... dallied require_from_group, doesn't seem much better."

the require_from_group method works fine me, didn't show plenty code know went wrong it. create sure include the additional-methods.js file.

my demo uses next jquery along html markup radio buttons, although made sure rename 3rd button grouping answer_option3.

$(document).ready(function() { $('#myform').validate({ rules: { answer_option1: { require_from_group: [1, '[name^="answer_option"]'] }, answer_option2: { require_from_group: [1, '[name^="answer_option"]'] }, answer_option3: { require_from_group: [1, '[name^="answer_option"]'] } }, groups: { // groups messages 1 arbitraryname: 'answer_option1 answer_option2 answer_option3' } }); });

demo: http://jsfiddle.net/qf2pg/1/

notes: groups alternative groups messages multiple fields one. perfect situation simultaneous messages on 3 fields when need satisfy 1 out of three.

alternative:

the .rules('add') method can leveraged alleviate repetitive rules declarations above.

$('[name^="answer_option"]').each(function() { $(this).rules('add', { require_from_group: [1, '[name^="answer_option"]'] }); });

demo 2: http://jsfiddle.net/qf2pg/2/

jquery jquery-validate

No comments:

Post a Comment