我使用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>
如何在右侧显示错误?
答案 0 :(得分:0)
将 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>
答案 1 :(得分:0)
FormValidation&#39; err.container选项允许在各种选项中定义消息区域: * CSS选择器 *回调 *工具提示 * popover
在您的情况下,您可以使用回调来指示消息区域。
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示例还提供了更多有用的示例。