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技术-屏蔽类
Aug 15 Javascript
又一个小巧的图片预加载类
May 05 Javascript
picChange 图片切换特效的函数代码
May 06 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
May 23 Javascript
js/jquery判断浏览器的方法小结
Sep 02 Javascript
Javascript中引用类型传递的知识点小结
Mar 06 Javascript
一个可复用的vue分页组件
May 15 Javascript
详解node服务器中打开html文件的两种方法
Sep 18 Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
vue-cli3 从搭建到优化的详细步骤
Jan 20 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 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生成HTML静态页面实例代码
2008/08/31 PHP
通过PHP CLI实现简单的数据库实时监控调度
2009/07/01 PHP
json的键名为数字时的调用方式(示例代码)
2013/11/15 PHP
yii框架搜索分页modle写法
2016/12/19 PHP
PHP防止sql注入小技巧之sql预处理原理与实现方法分析
2019/12/13 PHP
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
Angular1.x自定义指令实例详解
2017/03/01 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
2017/03/02 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
node实现简单的反向代理服务器
2017/07/26 Javascript
浅析vue深复制
2018/01/29 Javascript
浅谈Vue render函数在ElementUi中的应用
2018/09/06 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
js实现圆形显示鼠标单击位置
2020/02/11 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
Python简单定义与使用二叉树示例
2018/05/11 Python
基于python的Paxos算法实现
2019/07/03 Python
Python绘图实现显示中文
2019/12/04 Python
python 实现让字典的value 成为列表
2019/12/16 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
Python实现疫情地图可视化
2021/02/05 Python
css3个性化字体_动力节点Java学院整理
2017/07/12 HTML / CSS
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
C/C++程序员常见面试题二
2015/11/19 面试题
高三毕业寄语
2014/04/10 职场文书
班子个人四风问题整改措施
2014/10/04 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
2015年圣诞节寄语
2015/08/17 职场文书
2016春季运动会前导词
2015/11/25 职场文书
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS