How to display error above input with bootstrap validator

Question

I'm using Bootstrap validator for bootstrap 3 and trying to display error messages above the input.

Here is the provided HTML code example:

<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>

this works fine but I want to display the error like this:

<!-- 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>

Am I missing something here, how to do it right?

or, is there another way to accomplish this task by using JavaScript? (if the first block of code is used, can I move the error above the input like the example of the 2nd code?)

Answer 1

Put the error inside the same parent div as the input. Try this:

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