Parsley 2.x 和 Bootstrap 3 错误消息跨度的错误放置答案

【问题标题】：Erroneous placement of error message span with Parsley 2.x and Bootstrap 3Parsley 2.x 和 Bootstrap 3 错误消息跨度的错误放置
【发布时间】：2014-03-25 17:45:51
【问题描述】：

我正在尝试将 Parsley 验证添加到 Bootstrap 3 btn 组中包含的一组单选按钮。

问题在于 parsley 注入的错误包装器（在我的情况下设置为跨度）出现在两个选项之间（包含在标签中）而不是 btn-group div 之外。

这在下面的示例中进行了说明：

<div class="form-group">
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default"><input type="radio" name="BuyAgain" value="True" data-parsley-required="true" data-parsley-multiple="BuyAgain" data-parsley-id="3282">Yes</label>
        <span class="help-block" id="parsley-id-multiple-BuyAgain"></span>
        <label class="btn btn-default"><input type="radio" name="BuyAgain" value="False" data-parsley-required="true" data-parsley-multiple="BuyAgain" data-parsley-id="3282">No</label>
    </div>
</div>

关于如何解决这个问题有什么建议吗？

【问题讨论】：

标签： html twitter-bootstrap parsley.js

【解决方案1】：

在挖掘源代码后，我注意到在初始化 Parsley 时有一个“errorsContainer”选项可用。

将初始化函数更改为：

$(".validate-form").parsley({
    successClass: "has-success",
    errorClass: "has-error",
    classHandler: function (el) {
        return el.$element.closest(".form-group");
    },
    errorsContainer: function (el) {
        return el.$element.closest(".form-group");
    },
    errorsWrapper: "<span class='help-block'></span>",
    errorTemplate: "<span></span>"
});

我现在得到了生成的 html：

<div class="form-group">
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default"><input type="radio" name="BuyAgain" value="True" data-parsley-required="true" data-parsley-multiple="BuyAgain" data-parsley-id="1481">Yes</label>
        <label class="btn btn-default"><input type="radio" name="BuyAgain" value="False" data-parsley-required="true" data-parsley-multiple="BuyAgain" data-parsley-id="1481">No</label>
    </div>
    <span class="help-block" id="parsley-id-multiple-BuyAgain"></span>
</div>

【讨论】：

根据（最新文档），您需要在包含 parsley.js 脚本之前定义一个 window.ParsleyConfig 对象。在这里，您可以覆盖以下字段：parsleyjs.org/doc/annotated-source/defaults.html
如果您依赖数据属性来配置验证选项（即您使用 data-parsley-validate 自动绑定），您可以覆盖实例的配置，而无需将整个初始化移至 JavaScript。（例如$('[data-parsley-validate]').parsley().options.errorsContainer = function (el) { return el.$element.closest(".form-group"); };）

【解决方案2】：

另一个与@Jon 响应等效的响应是在表单中添加 data-parsley-errors-container 属性。

<form data-parsley-errors-container=".form-group" data-parsley-validate="">
    ...
</form>

【讨论】：

使用 data-parsley-errors-container 属性将选择最后一个 .form-group，而不是根据上下文选择层次结构中相对于它正在验证的字段最近的一个。因此，如果您不希望在表单末尾将错误聚合到一个容器中，则需要使用 JavaScript 回调函数来保持将错误消息与其相关字段分组的行为（数据属性仅支持选择器而不是函数引用）。