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 相关文章推荐
JScript中的undefined和&quot;undefined&quot;的区别
Mar 08 Javascript
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
Dec 26 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
Jan 27 Javascript
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
Feb 17 Javascript
Node.js 制作实时多人游戏框架
Jan 08 Javascript
JavaScript匿名函数之模仿块级作用域
Dec 12 Javascript
input 禁止输入特殊字符的四种实现方式
Aug 24 Javascript
npm scripts 使用指南详解
Oct 08 Javascript
PM2自动部署代码步骤流程总结
Dec 10 Javascript
vue前后分离调起微信支付
Jul 29 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 图像处理类1
2009/06/15 PHP
5种PHP创建数组的实例代码分享
2014/01/17 PHP
php获取url参数方法总结
2014/11/13 PHP
smarty内置函数foreach用法实例
2015/01/22 PHP
php如何获取文件的扩展名
2015/10/28 PHP
js版本A*寻路算法
2006/12/22 Javascript
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
2013/10/22 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
angular.js之路由的选择方法
2016/09/24 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
2016/11/05 Javascript
layui分页效果实现代码
2017/05/19 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
vue 1.0 结合animate.css定义动画效果
2018/07/11 Javascript
小程序实现列表点赞功能
2018/11/02 Javascript
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
JS实现4位随机验证码
2020/10/19 Javascript
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
各个系统下的Python解释器相关安装方法
2015/10/12 Python
批处理与python代码混合编程的方法
2016/05/19 Python
Python使用matplotlib模块绘制图像并设置标题与坐标轴等信息示例
2018/05/04 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
Python Pillow Image Invert
2019/01/22 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
Chain Reaction Cycles芬兰:世界上最大的在线自行车商店
2017/12/06 全球购物
个人自我评价分享
2013/12/20 职场文书
四川成都导游欢迎词
2014/01/18 职场文书
年度考核自我鉴定
2014/02/02 职场文书
班主任2015新年寄语
2014/12/08 职场文书
毕业设计致谢语
2015/05/14 职场文书