ParsleyJS 使用按钮组和下拉选择答案

【问题标题】：ParsleyJS working with button group and dropdown selectParsleyJS 使用按钮组和下拉选择
【发布时间】：2014-11-16 16:44:54
【问题描述】：

我正在尝试让 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>

【问题讨论】：

您能详细说明您的问题是什么吗？你想验证什么？什么不工作？你能提供一个小提琴吗？
它不验证我希望我需要下拉选择

标签： html twitter-bootstrap-3 parsley.js

【解决方案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>

发生了什么变化：

从<span> 中删除了data-parsley-required
为所有复选框添加了data-parsley-multiple='d-s-c'。取一个look at the documentation，它声明：

您可以将此属性添加到 radio / checkboxes 元素，如下所示：data-parsley-multiple="mymultiplelink" 以将它们链接在一起，即使它们不具有相同的名称。

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

最后一点，我们只需将 3. 和 4. 设置为第一个复选框。由于 Parlsey 会将复选框“分组”，因此您无需为每个复选框重复此代码（注意：如果您确实重复此代码，则没有问题）。

【讨论】：