問題描述:在使用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