bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路


Posted in Javascript onSeptember 28, 2016

一、前言

使用bootstrap-datepicker和bootstrapValidator也有一段时间了,在工作中发现两者同时使用时会出现的一种问题,当选择完日期后,并不会正确校验该字段。为了更加直观的展现问题,上图一张。

bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路

可以看出,当选择完日期后,校验结果并没有达到预期,是因为bootstrapValidator插件默认情况下,不会重复校验一个已经标记为验证通过或验证不通过的字段。so ,当开始触发校验后,没有通过校验,当正确选择日期后,并不会刷新校验结果,就会导致数据无法正常提交,当手动把日期改变后,会发现校验被正确触发了。现在就说解决方法。

二、问题解决

根据应用场景分析,当日期选择插件关闭时,期望能够触发校验。所以使用bootstrap-datepicker的hide方法。当日期选择框关闭时,执行刷新校验。先贴代码再解释:

/* 加载时间选择插件 */ 
$("#companyRegisteTime").datepicker({ 
todayBtn : "linked", 
autoclose : true, 
todayHighlight : true, 
endDate : new Date() 
}).on('hide',function(e) { 
$('#enterpriseInfoForm').data('bootstrapValidator') 
.updateStatus('companyRegisteTime', 'NOT_VALIDATED',null) 
.validateField('companyRegisteTime'); 
});

updateStatus方法的作用是更新给定字段的校验状态,官方介绍如下:

bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路

validateField方法的作用是触发给定字段的校验

bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路

boostrapValidator官方文档地址:http://bv.doc.javake.cn/api/

bootstrap-datepicker文档地址:http://bootstrap-datepicker.readthedocs.io/en/latest/

三、完整示例

1、JSP中

<form method="post" action="${ctx }/corp/enterpriseInfo/saveCorpInfo.htm" enctype="multipart/form-data" id="enterpriseInfoForm" name="enterpriseInfoForm"> 
<div class="col-md-5 col-md-offset-1 mar-top"> 
<div class="form-horizontal"> 
<div class="form-group"> 
<label class="col-md-3 control-label">公司注册时间:</label> 
<div class="col-md-9"> 
<input type="text" class="form-control" id="companyRegisteTime" name="companyRegisteTime" value="${corpInfo.companyRegisteTime }"> 
</div> 
</div> 
</div> 
</div> 
</form>

2、js中初始化

<span style="font-size:18px;">$('#enterpriseInfoForm').bootstrapValidator({ 
message : '该值无效', 
feedbackIcons : faIcon, 
excluded : ':disabled', 
fields : { 
companyRegisteTime : { 
message : '企业注册时间无效', 
validators : { 
notEmpty : { 
message : '企业注册时间不能为空' 
}, 
date : { 
format : 'YYYY/MM/DD', 
message : '日期格式不正确' 
} 
} 
} 
} 
});</span>

效果展示

bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路

以上所述是小编给大家介绍的bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 事件属性绑定带参数的函数
Mar 13 Javascript
js动态生成指定行数的表格
Jul 11 Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
May 01 Javascript
js中的内部属性与delete操作符介绍
Aug 10 Javascript
web前端开发JQuery常用实例代码片段(50个)
Aug 28 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
vue2项目使用sass的示例代码
Jun 28 Javascript
js实现动态改变radio状态的方法
Feb 28 Javascript
vue.js响应式原理解析与实现
Jun 22 Javascript
Vue核心概念Action的总结
Jan 18 Javascript
前端路由&amp;webpack基础配置详解
Jun 10 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
Sep 28 #Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
Sep 28 #Javascript
Javascript中判断一个值是否为undefined的方法详解
Sep 28 #Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 #Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 #Javascript
request请求获取参数的实现方法(post和get两种方式)
Sep 27 #Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 #Javascript
You might like
基于php设计模式中单例模式的应用分析
2013/05/15 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
js拖拽一些常见的思路方法整理
2014/03/19 Javascript
JavaScript中的异常捕捉介绍
2014/12/31 Javascript
jQuery知识点整理
2015/01/30 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
BootStrap表单控件之文本域textarea
2017/05/23 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
2018/11/14 Javascript
详解javascript设计模式三:代理模式
2019/03/25 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
[01:38:19]夜魇凡尔赛茶话会 第五期
2021/03/11 DOTA
Python检测网络延迟的代码
2018/05/15 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
python用opencv批量截取图像指定区域的方法
2019/01/24 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
Python实现密码薄文件读写操作
2019/12/16 Python
python Xpath语法的使用
2020/11/26 Python
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
小学生打架检讨书
2014/01/26 职场文书
体育教师自我鉴定
2014/02/12 职场文书
高中生职业生涯规划书
2014/02/24 职场文书
法律进社区实施方案
2014/03/21 职场文书
青年志愿者活动总结
2014/04/26 职场文书
公司捐书倡议书
2015/04/27 职场文书
肖申克救赎观后感
2015/06/02 职场文书
中学音乐课教学反思
2016/02/18 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS