Bootstrap 和 formvalidation.io：在一行中显示 .help-block

Question

我使用 Bootstrap 3.3.4 和 formvalidation 0.6.1 我需要显示 .help-block 才能正确显示错误 formvalidation.io（我使用 .form-horizontal）。

我尝试使用（停止服务）：

.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

将 help-inline 块放在包含输入的 div 之后，div.form-group 之前结束。

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

Answer 2

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 示例还提供了更多有用的示例。

Bootstrap 和 formvalidation.io：在一行中显示 .help-block

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

html

css

jquery

twitter-bootstrap

formvalidation-plugin