Bootstrap和formvalidation.io：顯示.help塊在一行

Question

我使用Bootstrap 3.3.4和formvalidation 0.6.1我需要顯示.help塊以顯示錯誤的權利formvalidation.io（我使用.form-horizo​​ntal ）。

我試圖用（不在服務區）：

.help-block { 
    display: inline; 
} 

我的形式：

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

如何使顯示在右邊有哪些誤區？

Answer 1

FormValidation的err.container選項允許在不同的選項來定義消息區域： * CSS選擇 *回調 *提示 *酥料餅

在你的情況，你可以使用一個回調來指示消息區域。

的HTML代碼：

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

的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'); 
     } 
    } 
    ... 
}); 

結果如下所示圖像：

的Showing messages in custom area例子還提供了更多的有用的例子。

Answer 2

把幫助直插塊包含輸入格後，以前div.form組末。

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