jqueryhtmlcsstwitter-bootstrapformvalidation-plugin

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


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?


Solution

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