Question

我正在尝试让ParsleyJS使用按钮组并下拉选择。如何才能做到这一点？

我试过通过JS添加它，但它仍然无法正常工作。这是我的HTML代码

<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

您无法将data-parsley-required添加到某个范围内，因为它无法正常工作。您需要将该属性添加到输入中。

假设至少需要一个复选框，您可以使用以下代码（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>

改变了什么：

从data-parsley-required

<span>

为所有复选框添加了data-parsley-multiple='d-s-c'。取一个look at the documentation表示：

您可以将此属性添加到这样的广播/复选框元素：data-parsley-multiple="mymultiplelink"，即使他们不共享相同的名称，也要将它们链接在一起。

我假设您要验证，至少选中了一个复选框。如果我们没有添加此属性，则需要所有复选框。
将属性required添加到第一个复选框。这使得由data-parsley-multiple定义的组成为必需。
添加了data-parsley-errors-container="#message-holder"，因此错误消息会显示在下拉列表外部。请注意，我已在<div id="message-holder"></div>。

<ul>

作为最后一点，我们只需要将3.和4.设置为第一个复选框。因为Parlsey将会＆＃34; group＆＃34;您不需要为每个复选框重复此代码的复选框（注意：如果您重复此代码，则没有问题）。

ParsleyJS使用按钮组和下拉选择

1 个答案: