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 相关文章推荐
javascript中的对象和数组的应用技巧
Jan 07 Javascript
window.onbeforeunload方法在IE下无法正常工作的解决办法
Jan 23 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
js截取字符串的两种方法及区别详解
Nov 05 Javascript
JavaScript中实现sprintf、printf函数
Jan 27 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
js canvas实现放大镜查看图片功能
Jun 08 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
微信小程序Page中data数据操作和函数调用方法
May 08 Javascript
js事件触发操作实例分析
Jun 21 Javascript
微信小程序组件传值图示过程详解
Jul 31 Javascript
JavaScript使用canvas绘制坐标和线
Apr 28 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
全国FM电台频率大全 - 29 青海省
2020/03/11 无线电
PHP获取当前系统时间的方法小结
2018/10/03 PHP
动态改变textbox的宽高的js
2006/10/26 Javascript
JavaScript去掉空格的方法集合
2010/12/28 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
2015/03/24 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
Angular浏览器插件Batarang介绍及使用
2018/02/07 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
2019/10/26 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
[50:05]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
Python字符串格式化输出方法分析
2016/04/13 Python
详解Python中的动态属性和特性
2018/04/07 Python
python实现多线程网页下载器
2018/04/15 Python
python3.x 将byte转成字符串的方法
2018/07/17 Python
浅谈flask源码之请求过程
2018/07/26 Python
浅谈关于Python3中venv虚拟环境
2018/08/01 Python
利用python和百度地图API实现数据地图标注的方法
2019/05/13 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
用python实现一个简单的验证码
2020/12/09 Python
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
澳大利亚顶级美发和美容贸易超市:glamaCo
2020/01/19 全球购物
雷蛇美国官网:Razer
2020/04/03 全球购物
小学生自我鉴定
2013/10/12 职场文书
小学毕业演讲稿
2014/04/25 职场文书
2014党员自我评议表范文
2014/09/20 职场文书
先进工作者申报材料
2014/12/23 职场文书
仙境之桥观后感
2015/06/16 职场文书
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby