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

 更新时间:2017年01月11日 11:51:44   作者:bestdoufu  
这篇文章主要为大家详细介绍了bootStrapValidator和bootStrap-select验证不可用的解决办法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

如何解决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个精彩的专题:

Bootstrap学习教程

Bootstrap实战教程

Bootstrap Table使用教程

Bootstrap插件使用教程

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

相关文章

  • javascript制作照片墙及制作过程中出现的问题

    javascript制作照片墙及制作过程中出现的问题

    这篇文章主要介绍了javascript制作照片墙及制作过程中出现的问题,感兴趣的朋友可以参考一下
    2016-04-04
  • 微信小程序实现简单的计算器功能

    微信小程序实现简单的计算器功能

    这篇文章主要为大家详细介绍了微信小程序实现简单的计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-07-07
  • 前后端常见的几种鉴权方式(小结)

    前后端常见的几种鉴权方式(小结)

    这篇文章主要介绍了前后端常见的几种鉴权方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • JavaScript defineProperty如何实现属性劫持

    JavaScript defineProperty如何实现属性劫持

    双向数据绑定的核心方法,主要是做数据劫持操作(监控数据变化),下面这篇文章主要给大家介绍了关于JavaScript defineProperty如何实现属性劫持的相关资料,需要的朋友可以参考下
    2021-07-07
  • js实现前端分页页码管理

    js实现前端分页页码管理

    本文主要介绍了js实现前端分页页码管理的具体方法。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 详解A标签中href=

    详解A标签中href=""的几种用法

    这篇文章主要介绍了a标签中href=""的几种用法 ,需要的朋友可以参考下
    2017-08-08
  • Rxjs TakeUntil 操作符内容梳理总结

    Rxjs TakeUntil 操作符内容梳理总结

    这篇文章主要介绍了Rxjs TakeUntil操作符内容梳理总结,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-06-06
  • 几句话带你理解JS中的this、闭包、原型链

    几句话带你理解JS中的this、闭包、原型链

    在javascript前端开发阶段经常会遇到this,闭包,原型链知识,那么大家对这三种的基本知识理解吗?今天小编就带领大家一起学习this,闭包,原型链的知识,感兴趣的朋友一起看看吧
    2016-09-09
  • ES6中Promise的使用方法实例总结

    ES6中Promise的使用方法实例总结

    这篇文章主要介绍了ES6中Promise的使用方法,结合实例形式总结分析了Promise对象中的各种常用方法及基本使用技巧,需要的朋友可以参考下
    2020-02-02
  • 微信小程序实现手机号码验证

    微信小程序实现手机号码验证

    这篇文章主要为大家详细介绍了微信小程序实现手机号码验证,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07

最新评论