ParsleyJS working with button group and dropdown select

Question

I'm trying to get ParsleyJS to work with a button group and drop down select. How can this be done?

I have tried adding it via JS but it's still not working. Here is my html code

<div class="btn-group m-r">
    <button data-toggle="dropdown" class="btn btn-sm btn-white dropdown-toggle">
        <span class="dropdown-label" data-placeholder='{{_ "pleaseSelect"}}' data-parsley-required>{{_ "type"}}&nbsp;&nbsp;</span>
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu dropdown-select">
        <li><a href="#"><input type="checkbox" name="d-s-c-1">Association</a></li>
        <li><a href="#"><input type="checkbox" name="d-s-c-2">Cooperative</a></li>
        <li><a href="#"><input type="checkbox" name="d-s-c-3">Cluster</a></li>
        <li><a href="#"><input type="checkbox" name="d-s-c-4">Contract Farming</a></li>
        <li><a href="#"><input type="checkbox" name="d-s-c-5">Individual Farm</a></li>
    </ul>
</div>

Answer 1

You can't add data-parsley-required to a span as it won't work. You need to add the attribute to the input.

Assuming that at least one checkbox is required, you can use the following code (jsfiddle available):

<div class="btn-group m-r">
    <button data-toggle="dropdown" class="btn btn-sm btn-white dropdown-toggle">
        <span class="dropdown-label" data-placeholder='{{_ "pleaseSelect"}}'>{{_ "type"}}&nbsp;&nbsp;</span>
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu dropdown-select">
        <li><a href="#"><input type="checkbox" name="d-s-c-1" data-parsley-multiple="d-s-c" required data-parsley-errors-container="#message-holder">Association</a></li>
        <li><a href="#"><input type="checkbox" name="d-s-c-2" data-parsley-multiple="d-s-c">Cooperative</a></li>
        <li><a href="#"><input type="checkbox" name="d-s-c-3" data-parsley-multiple="d-s-c">Cluster</a></li>
        <li><a href="#"><input type="checkbox" name="d-s-c-4" data-parsley-multiple="d-s-c">Contract Farming</a></li>
        <li><a href="#"><input type="checkbox" name="d-s-c-5" data-parsley-multiple="d-s-c">Individual Farm</a></li>
    </ul>
    <div id="message-holder"></div>
</div>

What's changed:

1. Removed data-parsley-required from <span>

2. Added data-parsley-multiple='d-s-c' to all checkboxes. Take a look at the documentation where it states:

   You can add this attribute to radio / checkboxes elements like this: data-parsley-multiple="mymultiplelink" to link them together even if they don't share the same name.

   I'm assuming that you want to validate that, at least one checkbox is checked. If we didn't add this attribute, all checkboxes would be required.

3. Added attribute required to the first checkbox. This makes the group defined by data-parsley-multiple required.
4. Added data-parsley-errors-container="#message-holder" so the error messages appear outside the dropdown. Note that I've added <div id="message-holder"></div> after the <ul>.

As a final note, we only need to set 3. and 4. to the first checkbox. Since Parlsey will "group" the checkboxes you don't need to repeat this code for every checkbox (note: if you do repeat this code, there's no problem).