欧芹的自助验证按摩

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

当出现问题时，欧芹在元素之后添加此代码：

<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