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?
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:
The Showing messages in custom area example also provides more helpful examples.