Bootstrap and formvalidation.io: display .help-block on one line

Question

I use Bootstrap 3.3.4 and formvalidation 0.6.1 me need display .help-block for right to display errors formvalidation.io (i use .form-horizontal).

I tried to use (out of service):

.help-block {
    display: inline;
}

My form:

<form class="form-horizontal" method="post" action=""   id="formProfile">   

<div class="form-group">
<label for="email" class="col-sm-3 control-label">E-mail</label>
<div class="col-sm-4">
<input name="email" id="email" 
type="email" class="form-control"
>
</div></div>

<div class="form-group">
<label for="nick" class="col-sm-3 control-label">Nick</label>
<div class="col-sm-4">
<input name="nick" id="nick" 
type="text" class="form-control"
>
</div></div>

</form>

How to make what errors are displayed on the right?

score 0 · Answer 1 · answered Apr 03 '15 at 09:50

0

put the help-inline block after div which contain input, and before div.form-group end.

<div class="form-group">
  <label for="nick" class="col-sm-3 control-label">Nick</label>
  <div class="col-sm-4">
    <input name="nick" id="nick" type="text" class="form-control" >
  </div>
  <span class="help-block">This is Errors</span>
</div>

answered Apr 03 '15 at 09:50

Stiekel

102
8

Thank you, i not guessed. And how to do it through formvalidation.io? – Firsim Apr 03 '15 at 10:00
sorry, i never used formvalidation before. – Stiekel Apr 03 '15 at 10:18
Maybe I gashel method ..`.help-block { position: absolute; width: 100%; left: 100%; top: 5px; }` – Firsim Apr 03 '15 at 10:55

score 0 · Accepted Answer · answered Apr 07 '15 at 04:12

FormValidation's err.container option allows to define messages area in various options: * A CSS selector * A callback * tooltip * popover

In your case, you can use a callback to indicate the message area.

The HTML code:

<div class="form-group">
    <label for="email" class="col-sm-3 control-label">E-mail</label>
    <div class="col-sm-4">
        <input name="email" id="email" type="email" class="form-control">
    </div>

    <!-- The messages are shown here -->
    <div class="col-sm-5 messageContainer"></div>   
</div>

<div class="form-group">
    <label for="nick" class="col-sm-3 control-label">Nick</label>
    <div class="col-sm-4">
        <input name="nick" id="nick" type="text" class="form-control">
    </div>

    <!-- The messages are shown here -->
    <div class="col-sm-5 messageContainer"></div>
</div>

The Javascript:

$('#formProfile').formValidation({
    framework: 'bootstrap',
    err: {
        container: function($field, validator) {
            // Look at the markup
            //  <div class="col-sm-4">
            //      <field>
            //  </div>
            //  <div class="col-sm-5 messageContainer"></div>
            return $field.parent().next('.messageContainer');
        }
    }
    ...
});

The result looks like the following image:

Showing messages in the right

The Showing messages in custom area example also provides more helpful examples.

Bootstrap and formvalidation.io: display .help-block on one line

2 Answers2