Erroneous placement of error message span with Parsley 2.x and Bootstrap 3

问题

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?

回答1:

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>

回答2:

Another response, which is equivqlent to @Jon response is to add a the data-parsley-errors-container attribute to your form.

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

来源：https://stackoverflow.com/questions/22642409/erroneous-placement-of-error-message-span-with-parsley-2-x-and-bootstrap-3

标签

html

twitter-bootstrap

parsley.js