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 相关文章推荐
jQuery 定时局部刷新(setInterval)
Nov 19 Javascript
struts2+jquery+json实现异步加载数据(自写)
Jun 24 Javascript
js中replace的用法总结
Dec 27 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
Apr 20 Javascript
深入探讨前端框架react
Dec 09 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
Oct 25 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
JS实现前端缓存的方法
Sep 21 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
Vue自定义render统一项目组弹框功能
Jun 07 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与C#的值类型指向区别的详解
2013/05/21 PHP
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
在线编辑器中换行与内容自动提取
2009/04/24 Javascript
eval与window.eval的差别分析
2011/03/17 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
谈谈JavaScript异步函数发展历程
2015/09/29 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
2018/08/17 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
haskell实现多线程服务器实例代码
2013/11/26 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
python深度优先搜索和广度优先搜索
2018/02/07 Python
解决python matplotlib imshow无法显示的问题
2018/05/24 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
Python如何生成xml文件
2020/06/04 Python
Python项目跨域问题解决方案
2020/06/22 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
社区志愿者心得体会
2014/01/03 职场文书
总经理的岗位职责
2014/02/23 职场文书
交通事故协议书
2014/04/15 职场文书
英语专业毕业生求职信
2014/05/24 职场文书
超市员工辞职信范文
2015/05/12 职场文书
女方家长婚礼致辞
2015/07/27 职场文书
win10音频服务未响应怎么解决?win10音频服务未响应未修复的解决方法
2022/08/14 数码科技