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的列表拖动排序实现代码
Oct 01 Javascript
深入理解Javascript里的依赖注入
Mar 19 Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 Javascript
详解Backbone.js框架中的模型Model与其集合collection
May 05 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
Nov 21 Javascript
JQuery 动态生成Table表格实例代码
Dec 02 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 Javascript
如何理解Vue的.sync修饰符的使用
Aug 17 Javascript
Bootstrap Table列宽拖动的方法
Aug 15 Javascript
详解React之key的使用和实践
Sep 29 Javascript
ES6的循环与可迭代对象示例详解
Jan 31 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中加session验证)
2012/08/22 PHP
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
js获取及修改网页背景色和字体色的方法
2015/12/29 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
Google 地图API Map()构造器详解
2016/08/06 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
js获取ip和地区
2017/03/10 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
如何利用python查找电脑文件
2018/04/27 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
Python龙贝格法求积分实例
2020/02/29 Python
使用scrapy ImagesPipeline爬取图片资源的示例代码
2020/09/28 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
KIKO美国官网:意大利的平价彩妆品牌
2017/05/16 全球购物
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
大学毕业生通用求职信
2013/09/28 职场文书
策划助理岗位职责
2013/11/18 职场文书
总经理助理工作职责
2014/02/06 职场文书
企业趣味活动方案
2014/08/21 职场文书
群众路线剖析材料(四风问题)
2014/10/08 职场文书
2014年世界艾滋病日宣传活动总结
2014/11/18 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
2015秋季幼儿园开学通知
2015/07/16 职场文书