Question

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

问题是，parsley注入的错误包装器（在我的情况下设置为span）出现在两个选项（包含在标签中）之间，而不是在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>

Answer 2

另一个响应，相当于@Jon响应，是将data-parsley-errors-container属性添加到表单中。

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

错误消息的错误放置与Parsley 2.x和Bootstrap 3

2 个答案: