使用 Parsley Js 时在正确的 div 中显示错误消息的问题

Question

我正在使用 Parsley.js 执行一些工作正常的前端自定义验证。当出现错误时，它会显示在 div 的底部，但我希望将错误显示在具有帮助块类的 span 内。 span 类还包含来自后端代码的错误消息，可以正常工作。

我想使用相同的跨度类来显示来自 parsley.js 自定义验证器的错误。

布局

 <div class="form-line registar2 move {{ $errors->has('kra') ? ' has-error' : '' }}" >
      <input id="kra" placeholder="KRA PIN Number *" type="text-area" class="form-input" name="kra" value="{{ old('kra') }}" maxlength="12" required data-parsley-kra = ''>
      <div class="check-label"></div>
      @if ($errors->has('kra'))
        <span class="help-block">
            <strong>{{ $errors->first('kra') }}</strong>
        </span>
      @endif
    </div>

Parsleyjs 自定义验证器

window.Parsley.addValidator('kra', {
  validateString: function(value) {
    return true == (/[A-Z]\d{9,}[A-Z]$/.test(value));
  },
  messages: {
    en: 'Please insert a valid PIN number e.g <b> A123456789A </b>'
  }
});

Answer 1

data-parsley-errors-container 设置允许您更改 Parsley 放置错误消息的位置。