Change The Position Of Parsley-errors-list In Parsleyjs

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

Solution 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><labelclass="checkbox-inline"><inputtype="checkbox"id="inlineCheckbox1"requireddata-parsley-maxcheck="2"data-parsley-multiple="checkbox2"value="option1"data-parsley-errors-container="#checkbox-errors" /> 1
       </label><labelclass="checkbox-inline"><inputtype="checkbox"id="inlineCheckbox2"data-parsley-maxcheck="2"data-parsley-multiple="checkbox2"value="option2" /> 2
       </label><labelclass="checkbox-inline"><inputtype="checkbox"id="inlineCheckbox3"data-parsley-maxcheck="2"data-parsley-multiple="checkbox2"value="option3" /> 3
       </label><divid="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><labelclass="checkbox-inline"><inputtype="checkbox"id="inlineCheckbox1"requireddata-parsley-maxcheck="2"data-parsley-multiple="checkbox2"value="option1" /> 1
       </label><labelclass="checkbox-inline"><inputtype="checkbox"id="inlineCheckbox2"data-parsley-maxcheck="2"data-parsley-multiple="checkbox2"value="option2" /> 2
       </label><labelclass="checkbox-inline"><inputtype="checkbox"id="inlineCheckbox3"data-parsley-maxcheck="2"data-parsley-multiple="checkbox2"value="option3" /> 3
       </label><divid="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');
       }
   };
   

Solution 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><divclass="radio radio-primary"><inputtype="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"><labelfor="cellPhone1"> Yes </label></div><divclass="radio radio-primary"><inputtype="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"><labelfor="cellPhone0"> No </label></div></div><divclass="margin-top10"id="cell-phone-validation-error-block"></div>

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