16

I want to alter the positioning of each error message. That is display the error message in the respective <div class="errorBlock"></div>. By using the documentation's code the the error msg is displayed before the element (input) and not displayed as expected. Any ideas?

As per documentation: 

errors: {
    container: function (element, isRadioOrCheckbox) {
        var $container = element.parent().find(".parsley-container");
        if ($container.length === 0) {
            $container = $("<div class='parsley-container'></div>").insertBefore(element);
        }
        return $container;
    }
}

My html code is:

INPUT

<div class="input-group date date-picker" data-date-format="dd/mm/yyyy" data-date-viewmode="years">             
  <input class="form-control dataScrap firstInput" type="text" parsley-notblank="true" parsley-required="true" parsley-error-message="You must input a birth date" readonly="readonly"/>
  <span class="input-group-btn">
   <button class="btn default" type="button"><i class="fa fa-calendar"></i></button>
  </span>
  <div class="errorBlock"></div>
</div>

CHECKBOX

<div class="checkbox-list">
    <label class="checkbox-inline">
        <input type="checkbox" parsley-group="checkboxGroup" parsley-mincheck="2"> Checkbox 1
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" parsley-group="checkboxGroup"> Checkbox 2
    </label>
    <div class="errorBlock"></div>
</div>

4 Answers4

16

You can do this by overwriting Parsley's default options. (note: I'm talking about the latest version [v2.0], which I suggest you use) You basically want to give Parsley a method that will find the .errorBlock container based on the input field. It would look something like this:

var parsleyConfig = {
    errorsContainer: function(pEle) {
        var $err = pEle.$element.siblings('.errorBlock');
        return $err;
    }
}

$('#yourFormID').parsley(parsleyConfig);

And here's a live example.

Note: using this method you can't use the parsley-validate attribute that Makrand suggests. Calling .parsley on your form does the same thing, except you can add your custom options to it. Also, you need to prefix all of your parsley attributes with data-, because they're data attributes (as of v2.0).

Timothy Miller
  • 2,391
  • 1
  • 27
  • 34
10

try this:

data-parsley-errors-container=".errorBlock"

You can check this attribute in Parsley Documentation

Ahmad Hussain
  • 2,443
  • 20
  • 27
  • 1
    doesnt work here since there is
    after each input element. parsley-error-container, will display all messages to the specified handler.     –  Feb 11 '14 at 13:12
  • @andreas777 why don't you add a DIV at the top and provide a class to it to be used for parsley-error-container – Makrand Feb 11 '14 at 13:14
  • 1
    @Makrand thats NOT the requirement. I want each error to be displayed (separately) in a div after each input element. And I want help on how to do this as per the documentation example... >> $container = $("
    ").insertBefore(element);     –  Feb 11 '14 at 13:43
  • 1
    I want this to be dynamic and use the errors:{container} and NOT the parsley-error-container attribute –  Feb 12 '14 at 07:05
  • "~ .my-sibling-error-container" see here https://css-tricks.com/child-and-sibling-selectors/ – kheraud Jul 21 '15 at 09:25
  • Your documentation link is broken and it's `data-parsley-errors-container` – evolross Sep 03 '20 at 18:43
8

Parsley API has been updated. The current method is:

data-parsley-errors-container="#your-div-id"

See documentation here: http://parsleyjs.org/doc/index.html#psly-ui-for-field

Piotr Dajlido
  • 1,982
  • 15
  • 28
btburton42
  • 3,307
  • 2
  • 13
  • 10
0

In reference to @ahmad hussain's answer you also need to put an attribute in your form:

<form parsley-validate>
Makrand
  • 587
  • 5
  • 14