bootstrapValidator bootstrap-select驗證不可用的解決辦法

更新時間：2017年01月11日 11:51:44 作者：bestdoufu

這篇文章主要為大家詳細介紹了bootStrapValidator和bootStrap-select驗證不可用的解決辦法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

如何解決bootStrapValidator bootStrap-select驗證不可用，只要三步：

思路：把多選下拉框的選中值，賦給一個隱藏的input組件，再對input組件進行驗證（bootstrap-validator默認情況下hidden,disabled的組件不驗證，可以通過excluded屬性更改）,具體步驟如下：

1.表單驗證初始化（js）

$('#myModalForm').bootstrapValidator({
 message: 'This value is not valid',
 excluded : [':disabled'],//[':disabled', ':hidden', ':not(:visible)'] //設置隱藏組件可驗證
 feedbackIcons: {
 valid: 'glyphicon glyphicon-ok',
 invalid: 'glyphicon glyphicon-remove',
 validating: 'glyphicon glyphicon-refresh'
 },
 fields: {
roleid: {
 message: '角色無效',
 validators: {
 notEmpty: {
 message: '角色不可為空'
 }
 }
 }
}
}）

2.bootStrap-select組件配置（jsp頁面）

<input type="hidden" class="form-control" id="roleid" name="roleid">
<select class="selectpicker form-control" multiple data-width="60%" id="roleidForSelect" title="---請選擇---"></select>

3.在多選下拉框選擇完畢后，為對應的input賦值

 $('#roleidForSelect').on('hidden.bs.select', function (e) { //該方法注冊到$(function(){})函數(shù)中
 var tmpSelected = $('#roleidForSelect').val();
 if(tmpSelected != null){
 $('#roleid').val(tmpSelected);
 }else {
 $('#roleid').val("");
 }
 //由于input為hidden，驗證會出現(xiàn)一些bug，此處手動驗證隱藏的input組件
 $('#myModalForm').data('bootstrapValidator').updateStatus('roleid', 'NOT_VALIDATED').validateField('roleid');
 });

如果大家還想深入學習，可以點擊這里進行學習，再為大家附3個精彩的專題：

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Bootstrap柵格系統(tǒng)學習筆記
這篇文章主要為大家詳細介紹了Bootstrap柵格系統(tǒng)學習筆記,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-11-11
JavaScript事件對象event用法分析
這篇文章主要介紹了JavaScript事件對象event用法,結(jié)合實例形式分析了事件對象event中常用的屬性、方法、相關(guān)操作技巧與注意事項,需要的朋友可以參考下
2018-07-07
使用JavaScript腳本無法直接改變Asp.net中Checkbox控件的Enable屬性的解決方法
今天工作中遇到個小問題，情況如下，當我在后臺頁面中設置Checkbox的Enable的值為false時，我在前端頁面中使用腳本(chk.disabled = false)，無法改變disabled的值為false，下面看看小編是怎么解決此問題的，需要的朋友一起了解了解吧
2015-09-09
js中for in語句的用法講解
這篇文章主要介紹了js中for in語句的用法講解,本文用多個實例講解了for in語句的用法及適合場景,需要的朋友可以參考下
2015-04-04
JS實現(xiàn)的簡單拖拽功能示例
這篇文章主要介紹了JS實現(xiàn)的簡單拖拽功能,涉及javascript鼠標事件響應及頁面元素屬性動態(tài)操作相關(guān)技巧,需要的朋友可以參考下
2017-03-03
js chrome瀏覽器判斷代碼
今天發(fā)現(xiàn)chrome還是有一些獨一無二的東西，基于它們，我們就可以搞出基于特征的判定了。
2010-03-03
Bootstrap每天必學之導航組件
Bootstrap每天必學之導航組件，制作面包屑式導航、導航加下拉菜單效果，感興趣的小伙伴們可以參考一下
2016-04-04
使用原生js實現(xiàn)頁面蒙灰(mask)效果示例代碼
像js的框架Extjs的mask()和unmask()功能提供了蒙灰效果，當然jquery也提供了這種蒙灰方法，下面有個示例，大家可以參考下
2014-06-06
微信小程序商品詳情頁底部彈出框
這篇文章主要為大家詳細介紹了微信小程序商品詳情頁底部彈出框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-11-11
基于JS實現(xiàn)步驟引導進度條效果的代碼示例
在Web前端開發(fā)中,步驟引導進度條是一種常見的交互設計,用于引導用戶完成多步驟任務,如表單填寫、注冊流程或支付操作,本文將詳細介紹如何利用JavaScript實現(xiàn)一個功能完善且視覺友好的步驟引導進度條效果,需要的朋友可以參考下
2025-02-02