html - 使用 Parsley 2.x 和 Bootstrap 3 错误消息范围的错误放置

Question

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

问题是 parsley 注入(inject)的错误包装器(在我的例子中设置为一个跨度)出现在两个选项之间(包含在标签中)而不是 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>

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

Answer 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>