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 prototype 原型链
Mar 12 Javascript
JavaScript 事件的一些重要说明
Oct 25 Javascript
js判断样式className同时增加class或删除class
Jan 30 Javascript
javascript父、子页面交互技巧总结
Aug 08 Javascript
jquery实现清新实用的网页菜单效果
Aug 28 Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
May 08 Javascript
js实现ATM机存取款功能
Oct 27 Javascript
在vue中使用G2图表的示例代码
Mar 19 Javascript
微信小程序背景音乐开发详解
Dec 12 Javascript
JavaScript实现省市区三级联动
Feb 13 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 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
屏蔽浏览器缓存另类方法
2006/10/09 PHP
检查php文件中是否含有bom的函数
2012/05/31 PHP
PHP过滤★等特殊符号的正则
2014/01/27 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
php自定义hash函数实例
2015/05/05 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
JavaScript输出当前时间Unix时间戳的方法
2015/04/06 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
2015/09/01 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
2016/03/01 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
2016/09/28 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
2017/06/26 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
Python中对列表排序实例
2015/01/04 Python
Python 多进程和数据传递的理解
2017/10/09 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
keras .h5转移动端的.tflite文件实现方式
2020/05/25 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
HTML5实现表单自动验证功能实例代码
2017/01/11 HTML / CSS
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
大学生入党自我鉴定
2013/10/31 职场文书
中专生自我鉴定范文
2014/02/02 职场文书
小学生优秀评语大全
2014/04/22 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
新教师2015年度工作总结
2015/07/22 职场文书
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL