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

时间:2018-12-03 09:37:09

标签: html error-handling parsley.js

我正在使用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>'
  }
});

1 个答案:

答案 0 :(得分:0)

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