欧芹自举验证按摩

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>

这是演示

Parsley.js文档参考链接