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,验证
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Django 跨域请求处理的示例代码
2022-05-27 17:08:46
![](https://img.aspxhome.com/file/2023/3/65503_0s.png)
GO的锁和原子操作的示例详解
2024-05-05 09:30:57
![](https://img.aspxhome.com/file/2023/0/128650_0s.png)
详解Python调用系统命令的六种方法
2023-11-20 02:22:36
![](https://img.aspxhome.com/file/2023/8/125038_0s.png)
获取当前url
2024-05-09 09:04:30
Sql Server之数据类型详解
2024-01-20 08:08:11
python3制作捧腹网段子页爬虫
2021-01-17 20:58:48
![](https://img.aspxhome.com/file/2023/5/128205_0s.jpg)
代码总结Python2 和 Python3 字符串的区别
2023-05-25 00:58:52
python神经网络Batch Normalization底层原理详解
2021-01-28 12:50:08
![](https://img.aspxhome.com/file/2023/2/75292_0s.png)
在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
![](https://img.aspxhome.com/file/2023/7/103717_0s.png)
一个基于flask的web应用诞生(1)
2022-06-22 09:23:52
![](https://img.aspxhome.com/file/2023/5/127925_0s.png)
在ASP.NET 2.0中操作数据之十一:基于数据的自定义格式化
2023-07-14 19:53:21
![](https://img.aspxhome.com/file/2023/7/75547_0s.png)
python使用pygame框架实现推箱子游戏
2022-02-12 00:34:13
![](https://img.aspxhome.com/file/2023/6/105866_0s.jpg)
python windows安装cuda+cudnn+pytorch教程
2023-02-04 04:35:02
![](https://img.aspxhome.com/file/2023/8/107038_0s.png)
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
![](https://img.aspxhome.com/file/2023/8/76678_0s.png)
MySQL 性能优化的最佳20多条经验分享
2024-01-22 00:42:49
![](https://img.aspxhome.com/file/2023/8/72498_0s.jpg)