javascript - 在父 div 之前显示 Parsley.js 错误

Question

我已经为此苦苦挣扎了几个小时，但无法让它发挥作用。

我正在使用 bootstrap，并尝试让 Parsley.js 按照我的意愿使用它。

默认情况下，错误消息显示在出错的输入元素下方，但我希望它们显示在父元素上方。

我的 HTML 在这里...

    <div class="row">
      <div class="col-xs-6"><label>Reference number</label></div>
      <div class="col-xs-6">
<div class="input-group">
  <span class="input-group-addon"><i class="fa fa-users fa" aria-hidden="true"></i></span>
          <input class="form-control" id="user_reference" name="user_reference" placeholder="Reference" data-parsley-group="stage_1" required />
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-6"><label>Your surname</label></div>
      <div class="col-xs-6">
<div class="input-group">
  <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
          <input class="form-control" id="user_surname" name="user_surname" placeholder="Surname" data-parsley-group="stage_1" required />
        </div>
      </div>
    </div>

我希望错误消息显示在 <div class="input-group"> 上方。这可能吗？

我已经尝试过这个javascript，但错误仍然出现在输入元素之后......

$(document).ready(function() {
    $('#register_form').parsley({
        trigger: 'change',
        successClass: 'has-success',
        errorClass: 'has-error',
        classHandler: function (el) {
            return el.$element.closest('.input-group');
        },
        errorsWrapper: '<div class="invalid-message"></div>',
        errorTemplate: '<span></span>'
    });
});

如果您能给我指明正确的方向，我将不胜感激!

Answer 1

检查文档中的 errorsContainer 配置选项，它将允许您执行您想要的操作。