bootstrapValidator bootstrap-select验证不可用的解决办法


Posted in Javascript onJanuary 11, 2017

如何解决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(){})函数中
 var tmpSelected = $('#roleidForSelect').val();
 if(tmpSelected != null){
 $('#roleid').val(tmpSelected);
 }else {
 $('#roleid').val("");
 }
 //由于input为hidden,验证会出现一些bug,此处手动验证隐藏的input组件
 $('#myModalForm').data('bootstrapValidator').updateStatus('roleid', 'NOT_VALIDATED').validateField('roleid');
 });

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
URL编码转换,escape() encodeURI() encodeURIComponent()
Dec 27 Javascript
ext 代码生成器
Aug 07 Javascript
跟着Jquery API学Jquery之一 选择器
Apr 07 Javascript
小试JQuery的AutoComplete插件
May 04 Javascript
jquery 取子节点及当前节点属性值的方法
Aug 24 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
Mar 04 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 Javascript
设置jquery UI 控件的大小方法
Dec 12 Javascript
JS正则表达式之非捕获分组用法实例分析
Dec 28 Javascript
JS实现的自动打字效果示例
Mar 10 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
Sep 12 Javascript
JS实现网页端猜数字小游戏
Mar 06 Javascript
HTML5 js实现拖拉上传文件功能
Nov 20 #Javascript
Bootstrap表单控件使用方法详解
Jan 11 #Javascript
老生常谈的跨域处理
Jan 11 #Javascript
bootstrap选项卡使用方法解析
Jan 11 #Javascript
常用的javascript设计模式
Jan 11 #Javascript
WebView启动支付宝客户端支付失败的问题小结
Jan 11 #Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 #Javascript
You might like
php 什么是PEAR?(第三篇)
2009/03/19 PHP
PHP设计模式之责任链模式的深入解析
2013/06/13 PHP
PHP中如何实现常用邮箱的基本判断
2014/01/07 PHP
php 删除cookie方法详解
2014/12/01 PHP
php排序算法实例分析
2016/10/17 PHP
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
js的image onload事件使用遇到的问题
2014/07/15 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
小程序server请求微信服务器超时的解决方法
2019/05/21 Javascript
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
python cs架构实现简单文件传输
2020/03/20 Python
python 并发下载器实现方法示例
2019/11/22 Python
pytorch-RNN进行回归曲线预测方式
2020/01/14 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
Python 多进程、多线程效率对比
2020/11/19 Python
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
《宿建德江》教学反思
2014/04/23 职场文书
电力培训心得体会
2014/09/02 职场文书
大学生创业计划书怎么写
2014/09/15 职场文书
毕业证丢失证明范本
2014/09/20 职场文书
“四风”查摆问题自我剖析材料
2014/09/27 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
2014年银行客户经理工作总结
2014/11/12 职场文书
党校培训学习心得体会
2016/01/06 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python