1

I have a form that has multiple sets of checkbox and/or radio groups that are dynamically created from sql data. I need to validate that at least 1 checkbox (or a radio button) is checked in each group. HTML output similar to this:

<td>
    <input type="checkbox" name"30001" id"30001-1" class="req_question" value="1">
    <input type="checkbox" name"30001" id"30001-2" class="req_question" value="2">
</td>
<td>    
    <input type="checkbox" name"30002" id"30002-1" class="req_question" value="1">
    <input type="checkbox" name"30002" id"30002-2" class="req_question" value="2">
</td>
<td>        
    <input type="radio" name"30003" id"30003-1" class="req_question" value="1">
    <input type="radio" name"30003" id"30003-2" class="req_question" value="2">
</td>
<td>    
    <input type="radio" name"30004" id"30004-1" class="req_question" value="1">
    <input type="radio" name"30004" id"30004-2" class="req_question" value="2">
</td>

I have the following addMethod, but this just checks for 1 button and then all groups are validated:

$.validator.addMethod('req_question', function(value) {
  return $('.req_question:checked').size() > 0;
}, 'Please check at least one box.');

I believe that this is grabbing the 'req_question' class and validating all the groups at once. How can I "find" all of the disparate groups and validate them individually, when I have no way to know how many there are, or what they are named?

Sparky
  • 94,381
  • 25
  • 183
  • 265
lrjurgen
  • 21
  • 2
  • 3

1 Answers1

3

Quote OP:

"How can I 'find' all of the disparate groups and validate them individually, when I have no way to know how many there are, or what they are named?"

What do you mean by "find"? Your code is already finding them.

What you're already doing now is exactly how you'd validate something when you don't know all the name's or how many you have. The req_question validation method/rule is automatically applied to every input that contains class="req_question" even if you don't know how many or their individual name's.

Your HTML Markup:

name"30004" id"30004-2"

There are two problems here:

1) You're missing the equals sign, =, on both. Should be name="30004" id="30004-2"

2) Typically, name and id values are not allowed to start with numbers. Although HTML5 will allow it, IMO, it's still bad coding practice. See: https://stackoverflow.com/a/79022/594235

Your Custom Method:

$.validator.addMethod('req_question', function(value) {
    return $('.req_question:checked').size() > 0;
}, 'Please check at least one box.');

Your function is broken because $('.req_question:checked') targets all of these checked elements at once. The function in addMethod takes two arguments, value and element. The value is the current value of the element being validated. The element is the current element being validated. These keywords are what you use since you only need to target the element being validated.

$.validator.addMethod('req_question', function (value, element) {
    return value > 0;
}, 'Please check at least one box.');

Working DEMO: http://jsfiddle.net/9y2MB/

HOWEVER, you do not need a custom method to do this. By default, if you apply the required rule to these same elements, you will get the same exact result. I use the .rules('add') method to add the required rule to all fields of with a req_question class.

$('.req_question').each(function () {
    $(this).rules('add', {
        required: true,
        messages: {
            required: 'Please check at least one box.'
        }
    });
});

DEMO 2: http://jsfiddle.net/9y2MB/1/

But wait! It's even way simpler than that. Just use class="required" instead of class="req_question" on all of these elements...

<input type="checkbox" name="n30001" id="n30001-1" class="required" value="1" />

DEMO 3: http://jsfiddle.net/9y2MB/2/

Community
  • 1
  • 1
Sparky
  • 94,381
  • 25
  • 183
  • 265