Question

191

Change the position of parsley-errors-list in parsleyjs

rated 0 times [ 195] [ 4] / answers: 1 / hits: 19119 / 9 Years ago, fri, may 8, 2015, 12:00:00

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:

enter

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kayle

Add To Favorites

Follow

Total Points: 267

Total Questions: 77

Total Answers: 99

Location: Central African Republic

Member since Mon, Aug 10, 2020

4 Years ago

answered 9 Years ago jackie · Accepted Answer

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

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.

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

    }

};