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

作者:bestdoufu 时间:2024-04-10 13:53:06 

如何解决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插件使用教程

标签:bootStrapValidator,bootStrap,验证
0
投稿

猜你喜欢

  • Django 跨域请求处理的示例代码

    2022-05-27 17:08:46
  • GO的锁和原子操作的示例详解

    2024-05-05 09:30:57
  • 详解Python调用系统命令的六种方法

    2023-11-20 02:22:36
  • 获取当前url

    2024-05-09 09:04:30
  • Sql Server之数据类型详解

    2024-01-20 08:08:11
  • python3制作捧腹网段子页爬虫

    2021-01-17 20:58:48
  • 代码总结Python2 和 Python3 字符串的区别

    2023-05-25 00:58:52
  • python神经网络Batch Normalization底层原理详解

    2021-01-28 12:50:08
  • 在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程

    2023-04-22 23:03:44
  • mybatis统计每条SQL的执行时间的方法示例

    2024-01-28 12:54:43
  • python循环之彩色圆环实现示例

    2022-02-24 07:22:32
  • 一个基于flask的web应用诞生(1)

    2022-06-22 09:23:52
  • 在ASP.NET 2.0中操作数据之十一:基于数据的自定义格式化

    2023-07-14 19:53:21
  • python使用pygame框架实现推箱子游戏

    2022-02-12 00:34:13
  • python windows安装cuda+cudnn+pytorch教程

    2023-02-04 04:35:02
  • SQL Server数据库安装时常见问题解决方案集锦

    2024-01-19 05:05:57
  • 巧用特殊的空格字符

    2009-04-10 18:32:00
  • C#基于数据库存储过程的AJAX分页实例

    2024-01-26 20:43:23
  • python使用Flask操作mysql实现登录功能

    2024-01-21 02:20:00
  • MySQL 性能优化的最佳20多条经验分享

    2024-01-22 00:42:49
  • asp之家 网络编程 m.aspxhome.com