BootstrapValidator 解决多属性被同时校验问题《转》


问题描述:在使用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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM