bootstrapValidator bootstrap-select驗(yàn)證不可用的解決辦法
如何解決bootStrapValidator bootStrap-select驗(yàn)證不可用,只要三步:
思路:把多選下拉框的選中值,賦給一個(gè)隱藏的input組件,再對(duì)input組件進(jìn)行驗(yàn)證(bootstrap-validator默認(rèn)情況下hidden,disabled的組件不驗(yàn)證,可以通過(guò)excluded屬性更改),具體步驟如下:
1.表單驗(yàn)證初始化(js)
$('#myModalForm').bootstrapValidator({ message: 'This value is not valid', excluded : [':disabled'],//[':disabled', ':hidden', ':not(:visible)'] //設(shè)置隱藏組件可驗(yàn)證 feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { roleid: { message: '角色無(wú)效', validators: { notEmpty: { message: '角色不可為空' } } } } })
2.bootStrap-select組件配置(jsp頁(yè)面)
<input type="hidden" class="form-control" id="roleid" name="roleid"> <select class="selectpicker form-control" multiple data-width="60%" id="roleidForSelect" title="---請(qǐng)選擇---"></select>
3.在多選下拉框選擇完畢后,為對(duì)應(yīng)的input賦值
$('#roleidForSelect').on('hidden.bs.select', function (e) { //該方法注冊(cè)到$(function(){})函數(shù)中 var tmpSelected = $('#roleidForSelect').val(); if(tmpSelected != null){ $('#roleid').val(tmpSelected); }else { $('#roleid').val(""); } //由于input為hidden,驗(yàn)證會(huì)出現(xiàn)一些bug,此處手動(dòng)驗(yàn)證隱藏的input組件 $('#myModalForm').data('bootstrapValidator').updateStatus('roleid', 'NOT_VALIDATED').validateField('roleid'); });
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附3個(gè)精彩的專題:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- bootstrapValidator.min.js表單驗(yàn)證插件
- bootstrapValidator表單驗(yàn)證插件學(xué)習(xí)
- Bootstrap中的表單驗(yàn)證插件bootstrapValidator使用方法整理(推薦)
- 實(shí)用又漂亮的BootstrapValidator表單驗(yàn)證插件
- BootstrapValidator超詳細(xì)教程(推薦)
- jquery插件bootstrapValidator數(shù)據(jù)驗(yàn)證詳解
- Bootstrapvalidator校驗(yàn)、校驗(yàn)清除重置的實(shí)現(xiàn)代碼(推薦)
- BootstrapValidator實(shí)現(xiàn)注冊(cè)校驗(yàn)和登錄錯(cuò)誤提示效果
- 基于jQuery 實(shí)現(xiàn)bootstrapValidator下的全局驗(yàn)證
- Bootstrap簡(jiǎn)單實(shí)用的表單驗(yàn)證插件BootstrapValidator用法實(shí)例詳解
相關(guān)文章
淺談typescript中keyof與typeof操作符用法
本文主要介紹了typescript中keyof與typeof操作符用法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06全面了解addEventListener和on的區(qū)別
下面小編就為大家?guī)?lái)一篇全面了解addEventListener和on的區(qū)別。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07js 計(jì)數(shù)排序的實(shí)現(xiàn)示例(升級(jí)版)
這篇文章主要介紹了js 計(jì)數(shù)排序的實(shí)現(xiàn)示例(升級(jí)版),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01javascript中bind函數(shù)的作用實(shí)例介紹
bind()的方法在ie,6,7,8中不適用,需要擴(kuò)展通過(guò)擴(kuò)展Function prototype可以實(shí)現(xiàn)此方法,下面為大家介紹下javascript中bind函數(shù)的作用2014-09-09理解JavaScript的caller,callee,call,apply
文章挺好的,雖然我用的是jQuery,但感覺還是有些用的~~~2009-04-04javascript for循環(huán)性能測(cè)試示例
這篇文章主要介紹了javascript for循環(huán)性能測(cè)試,結(jié)合實(shí)例形式分析了javascript使用for循環(huán)遍歷數(shù)組的三種常用方法及對(duì)應(yīng)的時(shí)間消耗,總結(jié)javascript使用for循環(huán)遍歷數(shù)組的相關(guān)操作技巧,需要的朋友可以參考下2019-08-08微信小程序?qū)崿F(xiàn)禁止分享代碼實(shí)例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)禁止分享代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10