Change the position of parsley-errors-list in parsleyjs

Question

I am using parsleyjs.org to validate my forms.

The plugin creates a ui.parsley-errors-list when an input has a validation error.

The problem is that the .parsley-errors-list is being placed just after the form element's "input, textarea, radio etc.." breaking my layout as follows:

<fieldset>
    <p>Checkboxs with a max</p>
    <label class="checkbox parsley-error">
        <input name="checkbox2" type="checkbox" required="" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" data-parsley-id="5492"> <span></span>
        <p>Normal</p>
    </label>
    <ul class="parsley-errors-list filled" id="parsley-id-multiple-checkbox2">
        <li class="parsley-required">This value is required.</li>
    </ul>
    <label class="checkbox">
        <input name="checkbox2" type="checkbox" data-parsley-multiple="checkbox2" data-parsley-id="5492">   <span></span>
        <p>Normal</p>
    </label>
    <label class="checkbox">
        <input name="checkbox2" type="checkbox" data-parsley-multiple="checkbox2" data-parsley-id="5492">   <span></span>
        <p>Normal</p>
    </label>
</fieldset>

Instead, the .parsley-errors-list need to be positioned to be the last child/element within the container <fieldset>.

Is this achievable?

Answer 1

You can set the error container with (at least) two ways.

1. 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 with data-parsley-multiple="checkbox2".

2. 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 the errorsContainer 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');
       }
   };
   

Answer 2

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>