Parsley.js - Displaying Errors in a Specified Element
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......
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>
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;
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