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?

Ellen

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');
       }
   };
   

Finale

Can't I just change where it is being positioned? I just can't find the function that decides where the error container is positioned, can you help me find? because I might be able to achieve what i want by tweaking the code a bit with .closest("fieldset") – Ellen

@Ellen take a look at the updated answer. I think you're after the second approach. Let me know if it works. – Newt

The second option is exactly what I am looking for! Each fieldset will have its own errors so they won't be complained in one no. Can I achieve this by hacking the plugin rather adding an additional function? If not no worry will just use this function. – Ellen

@Ellen You can change the plugin to do that "automatically" but I strongly advise against it because you'll lose the ability to easily use newer versions. If you really want to do that you should change the code (ver.2.0.7) around the line 1277. – Newt

I bared that into account. At the very top of the code document I commented out what I have changed. So when I update it to a new version I can just apply the changes again. Will have a look at the line, what would you recommend me to do? As I have tweaked the plugin to add the classes parsley-error and success to the filedsets as well using .closest(fieldset) - it worked, but they don't very applied to the filedsets containing a chosen select inputs until you click on them and again :/ - I had a look at the code and it actually adds class="" only – Ellen

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>

Criterion

Answer 3

Try this:

$.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 class, because it works for many fields.

Thalweg