javascript - Change the position of parsley-errors-list in parsleyjs -

i using parsleyjs.org validate forms.

the plugin creates ui.parsley-errors-list when input has validation error.

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

<fieldset>     <p>checkboxs 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 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, .parsley-errors-list need positioned last child/element within container <fieldset>.

is achievable?

you can set error container (at least) 2 ways.

1. change container dom attributes

   in cases have 1 input (or group of inputs, do) , want change container of errors on inputs, can use data-parsley-errors-container="#element" (see docs). here 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 attribute data-parsley-errors-container="#checkbox-errors" on first checkbox , element <div id="checkbox-errors"></div> @ end of fieldset.

   in case don't need add data-parsley-errors-container checkboxes because you're "grouping" them data-parsley-multiple="checkbox2".

2. set custom configuration used parsley

   in cases have few or inputs , want change position of default container. lets fields placed inside fieldset , want display errors @ end of fieldset.

   this solution allows change default container 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 solution we've added element <div id="checkbox-errors"></div> before end of fieldset , changed errorscontainer option of parsley. if our element inside fieldset errors displayed inside #checkbox-errors.

   based on example, able set same container fields. in case options (jsfiddle demo):

   var parsleyconfig = {     errorscontainer: function(parsleyfield) {         return $('#errors');     } };