javascript - How can I get Parsley.js to oupt 1 error for a group of radio buttons or checkboxes?

Question

It seems like ParsleyJS outputs an error for each input in an input group. With ParsleyJS 2.x, how can I use the available features to check to make sure a minimum of 1 checkbox in a group is checked and only show 1 error under the entire group of checkboxes if not?

Answer 1

Ok, after some trial and error, I have this working. If you are validating for at least one checkbox in a group and only want to show a single error for a group of checkboxes or radio buttons, just do the following:

<label for="my_input_1"><input type="checkbox" id="my_input_1" name="my_input_group"> The Label</label>
<label for="my_input_2"><input type="checkbox" id="my_input_2" name="my_input_group"> The Label</label>
<label for="my_input_3"><input type="checkbox" id="my_input_3" name="my_input_group"> The Label</label>
<label for="my_input_4"><input type="checkbox" id="my_input_4" name="my_input_group"> The Label</label>
<label for="my_input_5"><input type="checkbox" id="my_input_5" name="my_input_group" data-parsley-mincheck="1" required> The Label</label>

That's how to do it in its most basic form. For this to work, the name attribute needs to have the same value for each item in the group. If for some reason you don't have control over the name attribute, you can define it with the data-parsley-multiple="some_group_name_here" attribute, like so:

<label for="my_input_1"><input type="checkbox" id="my_input_1" name="my_input_1" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_2"><input type="checkbox" id="my_input_2" name="my_input_2" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_3"><input type="checkbox" id="my_input_3" name="my_input_3" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_4"><input type="checkbox" id="my_input_4" name="my_input_4" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_5"><input type="checkbox" id="my_input_5" name="my_input_5" data-parsley-multiple="my_input_group" data-parsley-mincheck="1" required> The Label</label>

Again, you do not need the data-parsley-multiple="my_input_group" attribute on each input as long as each item in the group has the same name attribute. I will, however continue to include it in the following examples.

Both examples above will place an error below your last checkbox which says: "This value is required." If you want to change the error message for the group, we would use the data-parsley-error-message attribute in the last checkbox input, like this:

<label for="my_input_1"><input type="checkbox" id="my_input_1" name="my_input_1" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_2"><input type="checkbox" id="my_input_2" name="my_input_2" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_3"><input type="checkbox" id="my_input_3" name="my_input_3" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_4"><input type="checkbox" id="my_input_4" name="my_input_4" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_5"><input type="checkbox" id="my_input_5" name="my_input_5" data-parsley-multiple="my_input_group" data-parsley-mincheck="1" data-parsley-error-message="Please choose at least 1" required> The Label</label>

And, finally, if you want to get a little fancy and control where your error message displays, you can create an empty container with a class or an id, and again add the right parsley attributes to the last checkbox or radio button with a reference to the empty container class or id.

At the very top I've added an empty div with a class of "my_error_container". See how I reference it from the last checkbox?

<div class="my_error_container"></div>
<label for="my_input_1"><input type="checkbox" id="my_input_1" name="my_input_1" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_2"><input type="checkbox" id="my_input_2" name="my_input_2" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_3"><input type="checkbox" id="my_input_3" name="my_input_3" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_4"><input type="checkbox" id="my_input_4" name="my_input_4" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_5"><input type="checkbox" id="my_input_5" name="my_input_5" data-parsley-multiple="my_input_group" data-parsley-mincheck="1" data-parsley-error-message="Please choose at least 1" data-parsley-errors-container=".my_error_container" data-parsley-class-handler=".my_error_container" required> The Label</label>

Hope this helps some other people.

And remember, you do not need the data-parsley-multiple="my_input_group" attribute on each input as long as each item in the group has the same name attribute.