Change the position of the list of error parsels in parsleyjs

Question

I use parsleyjs.org to validate my forms.

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

The problem is that .parsley-errors-list is placed immediately after the form element "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, .parsley-errors-list should be placed as the last child in the <fieldset> container.

Is this achievable?

Answer 1

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

• Change container with DOM attributes

  In cases where you have only one input (or a group of inputs, just like you), and you want to change the error container on these inputs, you can use data-parsley-errors-container="#element" ( see documents ) . 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 data-parsley-errors-container="#checkbox-errors" attribute on the first checkbox and the <div id="checkbox-errors"></div> element at the end of the field set.

  In this case, you do not need to add the data-parsley-errors-container flags to all, because you "group" them with data-parsley-multiple="checkbox2" .

• Define the custom configuration that will be used in Parsley

  In cases where you have several or all inputs, and you want to change the default position of the container. Suppose that all fields are placed inside a field set and you want to display errors at the end of the field set.

  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 added the <div id="checkbox-errors"></div> element to the end of the field set and changed the errorsContainer parameter to Parsley. If our element is inside the field, errors will be displayed inside #checkbox-errors .

  Based on this example, you can also 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

Try the following:

 $.listen('parsley:field:error', function(fieldInstance){ var fieldName = fieldInstance.$element.attr('name'); var field = $('input[name="'+fieldName+'"]'); var fieldWrapper = field.parents('fieldset'); if (fieldWrapper.find('.errors_container').length > 0) { setTimeout(function(){ fieldWrapper.find('.errors_container').append(fieldWrapper.find('.parsley-errors-list')); },100); } }); $('form').parsley(); } 

Use a class because it works for many fields.

Answer 3

For this kind of interface errors in JS parsley. You can use the special data-parsley-errors-container validator to post parsley error messages according to the requirements of your form.

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