如何使用引导验证器在输入上方显示错误

Question

我正在使用Bootstrap validator for bootstrap 3 并尝试在输入上方显示错误消息。

这里是提供的 HTML 代码示例：

<form role="form" data-toggle="validator">
  <div class="form-group">
    <label for="inputEmail">Email</label>
    <input type="email" id="inputEmail">
    <div class="help-block with-errors"></div>
  </div>
</form>

这工作正常，但我想显示这样的错误：

<!-- display error -->
<div class="help-block with-errors"></div>
<!-- input -->
<div class="form-group">
    <label for="inputEmail">Email</label>
    <input type="email" id="inputEmail">
</div>

我是否在这里遗漏了什么，如何正确处理？

或者，还有其他方法可以使用 JavaScript 来完成这项任务吗？ （如果使用了第一个代码块，我可以像第二个代码的示例一样将错误移到输入上方吗？）

Answer 1

将错误放在与输入相同的父 div 中。试试这个：

<div class="form-group">
    <div class="help-block with-errors"></div>
    <label for="inputEmail">Email</label>
    <input type="email" id="inputEmail">
</div>