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

Question

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?

Soiree

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

Soiree

According to (latest docs) you need to define a window.ParsleyConfig object before including the parsley.js script. In here you can override the fields as in: parsleyjs.org/doc/annotated-source/defaults.html – Chemisorb

If you are otherwise relying on the data attributes to configure validation options (i.e. you are auto-binding with data-parsley-validate), you can override the instance's configuration without moving your entire initialization to JavaScript. (e.g. $('[data-parsley-validate]').parsley().options.errorsContainer = function (el) { return el.$element.closest(".form-group"); };) – Ferriferous

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

Procurable

Using the data-parsley-errors-container attribute will select the last .form-group rather than contextually selecting the closest one in the hierarchy relative to the field it is validating. So if you don't want your errors aggregated into one container at the end of your form, you need to use a JavaScript callback function to maintain the behavior of keeping error messages grouped with their relevant field (the data-attribute only supports a selector rather than a function reference). – Ferriferous