jQuery validate a group where field names contain brackets

jQuery validate a group where field names contain brackets

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.

  1. 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, e.g. checkboxName[1] ("1" referring to person one filling in the form).

Now this works perfectly:

  1. $.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.

  1. // 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 },
    }
With this everything works up to the point where the fields are grouped 
together. The error message is displayed on the form next to only the first
checkbox, but no matter how many of them are selected, jQuery does not seem
to register any of them actually selected. This is why I think the reason
could be in the brackets.

What could I do?