• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > bootstrapValidator bootstrap-select验证不可用的解决办法

bootstrapValidator bootstrap-select验证不可用的解决办法

作者:bestdoufu 字体:[增加 减小] 来源:互联网 时间:2017-05-11

bestdoufu通过本文主要向大家介绍了bootstrapvalidator,validator验证,validator验证框架,validator自定义验证,bootstrap表单验证等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

如何解决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: '角色不可为空'
  }
  }
 }
}
})


</div>

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>


</div>

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');
 });
</div>

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

Bootstrap学习教程

Bootstrap实战教程

Bootstrap Table使用教程

Bootstrap插件使用教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • BootstrapValidator实现注册校验和登录错误提示效果
  • bootstrapValidator 重新启用提交按钮的方法
  • bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
  • BootStrapValidator初使用教程详解
  • bootstrapValidator.min.js表单验证插件
  • bootstrapValidator bootstrap-select验证不可用的解决办法

相关文章

  • 2017-05-11jQuery中绑定事件bind() on() live() one()的异同
  • 2017-05-11js实现固定宽高滑动轮播图效果
  • 2017-05-11微信小程序 wx:for的使用实例详解
  • 2017-05-11JS优化与惰性载入函数实例分析
  • 2017-05-11js中document.referrer实现移动端返回上一页
  • 2017-05-11AngularJS $http模块POST请求实现
  • 2017-08-26前端Js框架汇总
  • 2017-05-11微信小程序 动态的设置图片的高度和宽度详解及实例代码
  • 2017-05-11JavaScript获取中英文混合字符串长度的方法示例
  • 2017-05-11jQuery插件ContextMenu自定义图标

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 老生常谈jquery中detach()和remove()的区别
    • JavaScript纯色二维码变成彩色二维码
    • JS设置CSS样式的方式汇总
    • 基于javascript实现数字英文验证码
    • vue-resourse将json数据输出实例
    • 详解JS中定时器setInterval和setTImeout的this指向问题
    • JavaScript实现实时更新系统时间的实例代码
    • js仿百度音乐全选操作
    • ES6中参数的默认值语法介绍
    • Vue原理剖析 实现双向绑定MVVM

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有