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的高性能TreeView(asp.net)
Feb 23 Javascript
js获取下拉列表的值和元素个数示例
May 07 Javascript
JsRender实用入门教程
Oct 31 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
浅析jQuery中使用$所引发的问题
May 29 Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
Jan 08 Javascript
微信小程序实现流程进度的图样式功能
Jan 16 Javascript
vue实现学生录入系统之添加删除功能
Jul 11 Javascript
详解vue 兼容IE报错解决方案
Dec 29 Javascript
JavaScript this关键字指向常用情况解析
Sep 02 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一些服务器端特性的配置加强php的安全
2006/10/09 PHP
PHP脚本数据库功能详解(上)
2006/10/09 PHP
PHP 图像尺寸调整代码
2010/05/26 PHP
PHP数据库操作四:mongodb用法分析
2017/08/16 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
nodejs获取本机内网和外网ip地址的实现代码
2014/06/01 NodeJs
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
jQuery中的on与bind绑定事件区别实例详解
2017/02/28 Javascript
javascript 中select框触发事件过程的分析
2017/08/01 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
浅谈微信小程序flex布局基础
2018/09/10 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
[09:37]2018DOTA2国际邀请赛寻真——不懈追梦的Team Serenity
2018/08/13 DOTA
发布你的Python模块详解
2016/09/15 Python
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
pyqt5实现登录界面的模板
2020/05/30 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
使用Python三角函数公式计算三角形的夹角案例
2020/04/15 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
2019/10/15 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
二年级体育教学反思
2014/01/15 职场文书
拾金不昧的表扬信
2014/01/16 职场文书
行政副总岗位职责
2014/02/23 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
2015年学校减负工作总结
2015/05/19 职场文书
借条如何写
2015/05/26 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
幼儿园小班班务总结
2015/08/03 职场文书
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫