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

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>

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

How to display error above input with bootstrap validator

javascript

twitter-bootstrap

twitter-bootstrap-3

bootstrapvalidator