使用Parsley 2.x和Bootstrap 3错误信息的错误放置位置 [英] Erroneous placement of error message span with Parsley 2.x and Bootstrap 3

问题描述

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

问题是，欧芹的错误包装注入（在我的案例中设置为跨度）出现在两个选项（包含在标签内）之间，而不是在btn-group div之外。

下面的例子说明了这一点：

 < div类=形式的基团> 
< div class =btn-groupdata-toggle =buttons> 
< label class =btn btn-default>< input type =radioname =BuyAgainvalue =Truedata-parsley-required =truedata-parsley-multiple = BuyAgaindata-parsley-id =3282>是< / label> 
< span class =help-blockid =parsley-id-multiple-BuyAgain>< / span> 
< label class =btn btn-default>< input type =radioname =BuyAgainvalue =Falsedata-parsley-required =truedata-parsley-multiple = BuyAgaindata-parsley-id =3282>否< / label> 
< / div> 
< / div> 
  

任何有关如何补救此问题的建议？

解决方案

在仔细研究源代码之后，我注意到初始化Parsley时有一个errorsContainer选项可供使用。

在将initalisation函数改为：

$ $ $（。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-groupdata-toggle =buttons> 
< label class =btn btn-default>< input type =radioname =BuyAgainvalue =Truedata-parsley-required =truedata-parsley-multiple = BuyAgaindata-parsley-id =1481>是< / label> 
< label class =btn btn-default>< input type =radioname =BuyAgainvalue =Falsedata-parsley-required =truedata-parsley-multiple = BuyAgaindata-parsley-id =1481>否< / label> 
< / div> 
< span class =help-blockid =parsley-id-multiple-BuyAgain>< / span> 
< / div> 
  

I'm trying to add Parsley validation to a set of radio buttons contained within a Bootstrap 3 btn-group.

The issue is that the error wrapper that parsley injects (in my case set to a span) is appearing in between the two options (which are contained within a label) rather that outside the btn-group div.

This is illustrated in the sample below:

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

Any suggestions as to how I can remedy this?

解决方案

After digging through the source code, I noticed there was an "errorsContainer" option available when initialising Parsley.

After changing the initalisation function to:

$(".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>"
});

I now get the resulting 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 2.x和Bootstrap 3错误信息的错误放置位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！