Bootstrap 欧芹验证按摩

Question

我正在使用欧芹验证库创建表单。这是表单元素，如：

<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>
...

当出现错误时，parsley 在元素后添加此代码：

<ul class="parsley-errors-list filled" id="parsley-id-5">
  <li class="parsley-type">This value should be a valid email.</li>
</ul>

我希望这些消息显示在每个字段下方，而不是右侧。

有什么想法吗？

Answer 1

如果您想自定义错误消息的布局而不是默认的 <ul> <li> 结构，您可以像这样覆盖默认选项：

$(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);

});

验证错误消息将在自定义结构中显示为：

<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>

这里是DEMO

Parsley.js documentation reference link

Bootstrap 欧芹验证按摩

Bootstrap validation massage with parsley

twitter-bootstrap

parsley.js

angular