在父 div 之前显示 Parsley.js 错误答案

【问题标题】：Show Parsley.js errors before parent div在父 div 之前显示 Parsley.js 错误
【发布时间】：2017-05-01 19:37:51
【问题描述】：

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

我正在使用引导程序，并试图让 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>'
    });
});

如果您能指出正确的方向，我将不胜感激！

【问题讨论】：

标签： javascript twitter-bootstrap parsley.js

【解决方案1】：

@Marc - 谢谢，这让我走上了正轨。如果其他人需要知道如何做到这一点，这里有几个很好的 SO 答案...

Change the position of parsley-errors-list in parsleyjs

Parsley.js - change error container

【讨论】：

【解决方案2】：

查看文档中的errorsContainer 配置选项，它可以让你做你想做的事。

【讨论】：