Change the position of parsley-errors-list in parsleyjs
For this kind of UI errors in the parsley js. You can use the data-parsley-errors-container custom validator for placing the parsley error message as per your form needs.
<div>
<div class="radio radio-primary">
<input type="radio" id="cellPhone1" value="1" name="rd_cell_phone" required="" data-parsley-error-message="Please select an option" data-parsley-errors-container="#cell-phone-validation-error-block">
<label for="cellPhone1"> Yes </label>
</div>
<div class="radio radio-primary">
<input type="radio" id="cellPhone0" value="0" name="rd_cell_phone" required="" data-parsley-error-message="Please select an option" data-parsley-errors-container="#cell-phone-validation-error-block">
<label for="cellPhone0"> No </label>
</div>
</div>
<div class="margin-top10" id="cell-phone-validation-error-block"></div>
You can set the error container with (at least) two ways.
Change the container with DOM attributes
In cases where you only have one input (or group of inputs, like you do) and you want to change the container of the errors on those inputs, you can use
data-parsley-errors-container="#element"
(see the docs). Here is an example (jsfiddle demo)<fieldset> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" required data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option1" data-parsley-errors-container="#checkbox-errors" /> 1 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option2" /> 2 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox3" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option3" /> 3 </label> <div id="checkbox-errors"></div> </fieldset>
Note the attribute
data-parsley-errors-container="#checkbox-errors"
on the first checkbox and the element<div id="checkbox-errors"></div>
at the end of the fieldset.In this case you don't need to add the
data-parsley-errors-container
to all checkboxes because you're "grouping" them withdata-parsley-multiple="checkbox2"
.Set a custom configuration to be used by Parsley
In cases where you have a few or all inputs and you want to change the position of the default container. Lets say all your fields are placed inside a fieldset and you want to display the errors at the end of the fieldset.
This solution allows you to change the default container for each field (jsfiddle demo)
<fieldset> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" required data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option1" /> 1 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option2" /> 2 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox3" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option3" /> 3 </label> <div id="checkbox-errors"></div> </fieldset> <script> $(document).ready(function() { var parsleyConfig = { errorsContainer: function(parsleyField) { var fieldSet = parsleyField.$element.closest('fieldset'); if (fieldSet.length > 0) { return fieldSet.find('#checkbox-errors'); } return parsleyField; } }; $("form").parsley(parsleyConfig); }); </script>
In this solution we've added the element
<div id="checkbox-errors"></div>
before the end of the fieldset and changed theerrorsContainer
option of Parsley. If our element is inside a fieldset the errors will be displayed inside the#checkbox-errors
.Based on this example, you are also able to set the same container for all fields. In this case your options would be something like this (jsfiddle demo):
var parsleyConfig = { errorsContainer: function(parsleyField) { return $('#errors'); } };