CODEWITHSUNDEEP
jqueryjquery-validate
Jim Miller
Jim Miller

Reputation: 3329

jQuery validation: one radio button in any of several groups

I've got a form with three 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 the jqueryvalidation.org sense) if any one of these 12 radios is selected. I was able to make work the usual methods of hanging "require" classes of one sort or another off the buttons, but only for individual groups, not across all groups -- selecting a radio in group 1 would still lead to complaints about missing selections in groups 2 and 3. I also dallied with require_from_group, but that doesn't seem much better. Any thoughts? Thanks!

Upvotes: 1

Views: 804

Answers (1)

Sparky
Sparky

Reputation: 98738

Quote OP:

"The form should pass validation if any one of these 12 radios is selected. ..."

"... I also dallied with require_from_group, but that doesn't seem much better."

The require_from_group method works fine for me, but you didn't show enough code to know where you went wrong with it. Just make sure to include the additional-methods.js file.

My demo uses the following jQuery along with the HTML markup for your radio buttons, although I made sure to rename your third button group as 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 all messages into one
            arbitraryName: 'answer_option1 answer_option2 answer_option3'
        }
    });
    
});

DEMO: http://jsfiddle.net/qf2Pg/1/

Notes: The groups option simply groups messages for multiple fields into one. Perfect for this situation where you would normally get simultaneous messages on three fields when you only need to satisfy one out of three.

ALTERNATIVE:

The .rules('add') method can be leveraged to alleviate the 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/

Upvotes: 2

Related Questions