Parsley.js - Displaying Errors in a Specified Element

Question

Using Parsley.js, is it possible to specify the element that should hold the error messages? I tried:

$('#myForm').parsley({
    errors: {
        container: {
            $('#errorMessages')
        }
    }
});

But the error messages are still placed right after my form inputs.

Coffeecolored

Answer 1

I've added another data-attribute, data-parsley-errors-container="#element". That could allow you modify the DOM to specify where the error messages will be displayed.

More info here: http://parsleyjs.org/doc/index.html#ui-for-field

Best

Worley

@user12345 here's an updated link parsleyjs.org/doc/index.html#ui-for-field – Colophony

can you give simple demo in jsfiddel about it? – Byrn

Thanks, Dear can you help me that how do I get my custom error message without giving in the script. I mean inside the input. is it possible? – Tiphani

Answer 2

I returned true from the function provided with container key.

My HTML Element

<input type="text" class="input-small" errorSpan="yyy"  id="ddd" name="ddd" value="" data-required="true">
<span id="yyy"></span>

Javascript

$('#abc').parsley({
            errors: {
                classHandler: function ( elem ) {}
              , container: function ( elem, template, isRadioOrCheckbox ) {
                   //here i have span msg. id to be displayed as custom attribute in input element
                    $('#' + $(elem).attr('errorSpan')).html(template);
                    return true;//returning back boolean makes it work
                  }
              , errorsWrapper: '<ul></ul>'
              , errorElem: '<li></li>'
              }
        });

It also works if I return

return $('#' + $(elem).attr('errorSpan')).html(template);

Hope this helps......

Reiser

Hi gbagga, I've changed this behavior on 1.1.10-dev. It's a BC Break. – Worley

Answer 3

You'll need to use a callback function to do so

Here a simple example to attach error messages to element parent for example.

$('#myForm').parsley({
    errors: {
        container: function ( elem ) {
            return $( elem ).parent();
        }
    }
});

EDIT: Working on 1.1.10-dev, I changed the way to define the errors container like above. Careful, this is a BC Break;

Worley

I also faced problem like tanin, can you confirm is there something that we are missing, I posted a solution, not sure its appropriate but it works for me :). – Reiser

My bad. The above behavior was an early implementation, not valida anymore. Your solution is right. But thinking to that now, I find not very handy this customization way, inserting a template inside your element. Maybe I should return to my above implementation, more simple and readable where you just have to return a dom element where template will be inserted by Parsley? – Worley

Answer 4

data-parsley-errors-container="#your-div-id" worked for me

<div class="form-group">
  <label for="middle-name" class="control-label col-md-3 col-sm-3 col-xs-12">Start Time</label>
  <div class="col-md-6 col-sm-6 col-xs-12">
       <div class=" datetimepicker3 input-append timepick">
          <input class="form-control" data-format="hh:mm" placeholder="HH:MM" type="text" name="startTime" data-parsley-errors-container="#startTimeErrorContainer" required="required"  id="startTime" />
          <span class="add-on"><i class="fa fa-clock-o icon-time"></i></span>  
       </div>   
      <div id="startTimeErrorContainer"></div>                                            
  </div>                       

Man

Answer 5

@guillaumepotier I have try your code on jquerymobile and I do not show any error message display on screen. I want to add error-message to class "help-inline"

index.html

<script src="js/vendor/parsley.message.th.js"></script>
<script src="js/vendor/parsley.extend.min.js"></script>
<script src="js/vendor/parsley.min.js"></script>

...

<div class="control-group">
    <label class="control-label" for="A0_C1">From<i class="required-icon"></i></label>
    <div class="controls">
        <input type="text" id="A0_C1" name="A0_C1" value="" required="required" />
        <span class="help-inline"></span>
    </div>
</div>

parsley.message.th.js

window.ParsleyConfig = $.extend( true, {}, window.ParsleyConfig, { 
    errors: {
        container: function ( elem ) {
            return $(elem).parent().find(".help-inline");
        }
    }
});

UPDATE - Working solution on v1.1.9-dev

return $(elem).closest('.controls').find('.help-inline').append(template);

Packer

Yes indeed. Sorry. It was working on a previous implementation. @gbagga answer is correct, though not very handy nor simple. I think I'll go back to my answer implementation in 1.1.9.. – Worley

I have update my solution. But I'm not sure this is the correct way to do in the future. – Packer

Sure. May be best to just return an elem where Parsley will append its stuff inside. And not have to deal with template in this function. What do you think about that? – Worley

Changed on 1.1.10-dev now; It will match my above answer. Careful, this is a BC Break; – Worley

Answer 6

Just define classHandler function before Parsley library import, in my case, i'm using bootstrap and it's to apply error and valid classes on parent div (it has "form-group" class).

<script>
    window.ParsleyConfig = {
      classHandler: function ( parsleyField) {
      // specify where parsley error-success classes will be set
      return parsleyField.$element.parent();
      // Change this to change the element to apply too
      },
    };
</script>

Now just add data-parsley validate to your form tag :

<form  method="post" id="form1" data-parsley-validate>

When using bootstrap, you need to specify bootstrap error and valid classes too

<form method="post" id="form1" data-parsley-error-class="has-error" data-parsley-success-class="has-success" data-parsley-validate>

In order to get the "has-error" class set on the parent div on invalid/error state (same for valid too):

<div class="form-group has-error">
    <label>Name</label>
    <input class="form-control" type="text" id="name" name="name" required="" data-parsley-trigger="keyup" data-parsley-minlength="5">
    <p class="help-block">Example help text here.</p>
</div>

This solution global to all fields.

Obannon