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?

Ligni

Maybe this would help #16914095 – Xiphoid

I did come across that, but unfortuantely it's unrelated. I believe I figured it out though. Posting the answer shortly after some tests. – Ligni

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.

Ligni

That's a perfect answer, would not have done better :) – Laban

Why does the mincheck error message not kick in, but only the required message. It seems you are just doing required to overcome the fail of the mincheck. – Subacute

how would you access those fields in a custom validator? – Mean

Very useful answer, thanks. However, it did not work for me adding the data-parsley-errors-container and data-parsley-class-handler attributes only to the last checkbox. Adding them to all the checkboxes worked for me. – Matthei

Interesting. Thanks for adding that comment. Since the original answer was about a year old, there may be some slight differences. Glad you pointed this out. – Ligni