CODEWITHSUNDEEP
twitter-bootstrapangularparsley.js
Jordi
Jordi

Reputation: 23277

Bootstrap validation massage with parsley

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>

enter image description here

I want these messages appears under each field, not on the right.

Any ideas?

Upvotes: 0

Views: 723

Answers (1)

Rahul Gupta
Rahul Gupta

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

Related Questions