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 相关文章推荐
巧妙破除网页右键禁用的十大绝招
Aug 12 Javascript
js 字符串操作函数
Jul 25 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 Javascript
HTML,CSS,JavaScript速查表推荐
Dec 02 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
整理Javascript流程控制语句学习笔记
Nov 29 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
JavaScript实现时钟滴答声效果
Jan 29 Javascript
浅谈js闭包理解
Apr 01 Javascript
vue-form表单验证是否为空值的实例详解
Oct 29 Javascript
微信小程序 button样式设置为图片的方法
Jun 19 Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 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
自动分页的不完整解决方案
2007/01/12 PHP
php 进度条实现代码
2009/03/10 PHP
php实现图片添加水印功能
2014/02/13 PHP
JavaScript面向对象设计二 构造函数模式
2011/12/20 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
jquery的attr方法禁用表单元素禁用输入内容
2014/06/23 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
jquery实现鼠标悬浮停止轮播特效
2020/08/20 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
2018/04/11 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
vue store之状态管理模式的详细介绍
2019/06/13 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
2020/11/12 Javascript
vue中activated的用法
2021/01/03 Vue.js
用Python编写生成树状结构的文件目录的脚本的教程
2015/05/04 Python
python通过socket查询whois的方法
2015/07/18 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
python通过链接抓取网站详解
2019/11/20 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
Pytorch在dataloader类中设置shuffle的随机数种子方式
2020/01/14 Python
柒牌官方商城:中国男装优秀品牌
2017/06/30 全球购物
档案管理员岗位职责
2013/12/01 职场文书
给面试官的感谢信
2014/02/01 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
学生违反校规检讨书
2014/10/28 职场文书
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记