jQuery validate a group where field names contain brackets

Question

Dear Javascript pro's,

I have an HTML form that contains two groups of checkboxes. One of the group contains checkboxes where one should be checked to pass jQuery validation. The other group is not mandatory to select.

First group (at least one checkbox should be selected):
<input type="checkbox" name="appSourceFirstoption[1]" value="Answer 1" id="appSourceFirstoption" />
<input type="checkbox" name="appSourceSecondoption[1]" value="Answer 2" id="appSourceSecondoption" />
<input type="checkbox" name="appSourceThirdoption[1]" value="Answer 3" id="appSourceThirdoption" />


Second group (these checkboxes are voluntary to select):
<input type="checkbox" name="appSourceVoluntaryFirst[1]" value="Answer 1" id="appSourceVoluntaryFirst" />
<input type="checkbox" name="appSourceVoluntarySecond[1]" value="Answer 2" id="appSourceVoluntarySecond" />
<input type="checkbox" name="appSourceVoluntaryThird[1]" value="Answer 3" id="appSourceVoluntaryThird" />

The names of the checkboxes contain array notations, eg checkboxName[1] ("1" referring to person one filling in the form).

Now this works perfectly:

    $.validator.addMethod('checkbox', function(value) {
     return $('input[type=checkbox]:checked').size() > 0;
    }, 'Please select at least one.');

but it applies to all of the checkboxes (so the validation could be passed even if one checkbox is selected from the second voluntary group).

If I try to group the mandatory checkboxes it does not work. I think it may be due to the fact that their names contain [] as mentioned.

    // adding the group 
    $.validator.addMethod("checkbox_1", function(value, element) {
    return $('.checkbox_1:checked').length > 0;
    }, 'Please select at least one.');


    $('#step').validate({

    // grouping the checkboxes together
    groups: {
    checkbox_1: "appSourceFirstoption[1] appSourceSecondoption[1] appSourceThirdoption[1]"
    },

    // applying the group rules to just one of the checkbox
    "appSourceFirstoption[1]" : { checkbox_1: true },
    }

Do you guys have any ideas how I could solve this?

Answer 1

1) You are missing "rules" option,

rules: {
        "appSourceFirstoption[1]": { checkbox_1: true }
       }

2) Change $('.checkbox_1:checked').length > 0; to

$('input[type=checkbox]:checked').length > 0;

Full Code

$(document).ready(function () {


$('#step').validate({

    // grouping the checkboxes together
    groups: {
              checkbox_1: "appSourceFirstoption[1] appSourceSecondoption[1] appSourceThirdoption[1]"
            },

    // applying the group rules to just one of the checkbox
    rules: {
              "appSourceFirstoption[1]": { checkbox_1: true }
           }
});

$.validator.addMethod("checkbox_1", function (value, element) {
    return $('input[type=checkbox]:checked').length > 0;
}, 'Please select at least one.');


});

Working fiddle. - https://jsfiddle.net/8ukbf3wy/