Reputation: 23277
I'm creating a form using parsley validation library. This is the form elements-like:
<form class="mt-lg parsleyjs" data-parsley-priority-enabled="false" [formGroup]="form" novalidate="novalidate" (ngSubmit)="checkPasswd()">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="email" class="form-control" id="mail" placeholder="Username" size="16" data-parsley-trigger="change" required="required" [formControl]="form.controls['mail']">
</div>
</div>
...
When something is wrong, parsley add this code after element:
<ul class="parsley-errors-list filled" id="parsley-id-5">
<li class="parsley-type">This value should be a valid email.</li>
</ul>
I want these messages appears under each field, not on the right.
Any ideas?
Upvotes: 0
Views: 723
Reputation: 10161
If you want to customize the layout of the error messages instead of the default <ul> <li>
structure, you can override the default options like this:
$(document).ready(function () {
var parsley_options = {
errorsWrapper: '<div class="custom-error-wrapper-class"></div>',
errorTemplate: '<span class="custom-error-template-class"></span>'
}
$('#myForm').parsley(parsley_options);
});
Validation error message will be displayed in custom structure as:
<div id="parsley-id-5" class="custom-error-wrapper-class filled">
<span class="custom-error-template-class parsley-required">This value is required.</span>
</div>
Here is the DEMO
Parsley.js documentation reference link
Upvotes: 1