bootstrap-datepicker日历插件 与bootstrapValidator验证同时使用时无效
来源:互联网 发布:北京房价数据库 编辑:程序博客网 时间:2024/05/16 18:17
一、前言
使用bootstrap-datepicker和bootstrapValidator也有一段时间了,在工作中发现两者同时使用时会出现的一种问题,当选择完日期后,并不会正确校验该字段。为了更加直观的展现问题,上图一张。
可以看出,当选择完日期后,校验结果并没有达到预期,是因为bootstrapValidator插件默认情况下,不会重复校验一个已经标记为验证通过或验证不通过的字段。so ,当开始触发校验后,没有通过校验,当正确选择日期后,并不会刷新校验结果,就会导致数据无法正常提交,当手动把日期改变后,会发现校验被正确触发了。现在就说解决方法。
二、问题解决
根据应用场景分析,当日期选择插件关闭时,期望能够触发校验。所以使用bootstrap-datepicker的hide方法。当日期选择框关闭时,执行刷新校验。先贴代码再解释:
方案一:
方案二:
或者change,changeDate,change三个相结合
updateStatus方法的作用是更新给定字段的校验状态,官方介绍如下:
validateField方法的作用是触发给定字段的校验
boostrapValidator官方文档地址:http://bv.doc.javake.cn/api/
bootstrap-datepicker文档地址:http://bootstrap-datepicker.readthedocs.io/en/latest/
三、完整示例
1、JSP中
2、js中初始化
效果展示
阅读全文
0 0
- bootstrap-datepicker日历插件 与bootstrapValidator验证同时使用时无效
- bootstrap-datepicker 与bootstrapValidator同时使用时,选择日期后,无法正常触发校验
- bootstrap-datepicker 与bootstrapValidator同时使用时,选择日期后,无法正常触发校验
- bootstrap数据验证插件BootstrapValidator
- jquery,bootstrap数据验证插件bootstrapValidator
- bootstrapValidator.js,bootstrap表单验证插件
- bootstrap插件bootstrapValidator常用验证规则总结
- bootstrap-datepicker插件使用
- 如何使用日历插件datepicker
- 如何使用日历插件datepicker
- bootstrap-datepicker日历控件的使用心得
- bootstrapValidator.js,最好用的bootstrap表单验证插件
- 基于jquery,bootstrap数据验证插件bootstrapValidator 教程
- 基于jquery,bootstrap数据验证插件bootstrapValidator 教程
- 基于jquery,bootstrap数据验证插件bootstrapValidator 教程
- 基于jquery,bootstrap数据验证插件bootstrapValidator 教程
- bootstrap datepicker显示日历
- 日历插件jquery datepicker的使用
- JVM类加载Class文件
- yii2.0利用yii2-swiftmailer扩展发送邮件
- 【知识库】--Dubbo ReferenceBean获取 -- 源码过程(254)
- LINUX2.6输入子系统设备模型分析
- INPUT设备输入事件的传递过程
- bootstrap-datepicker日历插件 与bootstrapValidator验证同时使用时无效
- Escape HDU
- jzoj 模拟赛总结(2017.07.08)
- 第六天,晚了
- CodeVS 3344 迷宫 题解
- 洛谷P3379 【模板】最近公共祖先(LCA)
- 9Patch图片
- HTML+CSS编写静态网站-30 课后作业06
- 服务器上下拉风格展现异常,无法点击问题解决方案