问题描述:在使用bootstrapValidator插件校验表单属性,当表单属性过多需要每行并列多个属性 ,会出现校验第一个属性,发现整行被校验的效果 ,这不是我们工作想要的效果。如图:
问题分析:因为bootstrapValidator默认情况是根据form-group样式验证提示,若我们代码中将同行显示属性放在一个form-group中,就会出现该问题,那么怎么解决呢 ,lz仔细阅读了该插件官网,发现存在group属性,其值默认为“.form-group”,该属性便是官方提供的在多个属性分组情况使用。
解决方案:首先html修改代码
<div class="form-group">
**<div class="rowGroup">**
<label class="col-md-2 control-label">供应商编号:</label>
<div class="col-md-2">
<input type="text" class="form-control" id="code" name="code" value = "" >
</div>
</div>
<div class="rowGroup">
<label class="col-md-2 control-label">供应商名称:</label>
<div class="col-md-2">
<input type="text" class="form-control" id="name" name="name" value="">
</div>
</div>
<div class="rowGroup">
<label class="col-md-2 control-label">供应商类型:</label>
<div class="col-md-2">
<select class="show-tick form-control" data-live-search="true" id="type" name="type">
</select>
</div>
</div>
</div>
JS修改代码
$('#supplierForm').bootstrapValidator({
container: 'tooltip',
group: '.rowGroup',
message : '数据错误',
excluded: ':disabled',
feedbackIcons: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
fields: {
code: {
validators: {
notEmpty: {
message: '供应商编号为空'
},
},
},
//其他属性略
},
submitHandler: function (validator, form, submitButton) {
validator.defaultSubmit();
}
});
结果图:
转自:http://blog.csdn.net/jingtianyiyi/article/details/77841365