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 相关文章推荐
js清空表单数据的两种方式(遍历+reset)
Jul 18 Javascript
AngularJS中处理多个promise的方式
Feb 02 Javascript
Vue 短信验证码组件开发详解
Feb 14 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
ES6解构赋值的功能与用途实例分析
Oct 31 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
Sep 04 Javascript
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
May 13 Javascript
用javascript实现倒计时效果
Feb 09 Javascript
Nest.js参数校验和自定义返回数据格式详解
Mar 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函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
php字符串截取的简单方法
2013/07/04 PHP
php中FTP函数ftp_connect、ftp_login与ftp_chmod用法
2014/11/18 PHP
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
php实现的递归提成方案实例
2015/11/14 PHP
如何使用GDB调试PHP程序
2015/12/08 PHP
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
2011/03/07 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
2016/01/06 Javascript
JS面向对象编程详解
2016/03/06 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
原生JS实现多个小球碰撞反弹效果示例
2018/01/31 Javascript
elementUi vue el-radio 监听选中变化的实例代码
2019/06/28 Javascript
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
零基础写python爬虫之爬虫编写全记录
2014/11/06 Python
pygame播放音乐的方法
2015/05/19 Python
Python实现最大子序和的方法示例
2019/07/05 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
Python matplotlib 绘制双Y轴曲线图的示例代码
2020/06/12 Python
python实现磁盘日志清理的示例
2020/11/05 Python
朗仕(Lab series)英国官网:雅诗兰黛集团男士专属护肤品牌
2017/11/28 全球购物
四年大学生活的个人自我评价
2013/12/11 职场文书
人力资源总监工作说明
2014/03/03 职场文书
党员个人公开承诺书
2014/08/29 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
奖励申请报告范文
2015/05/15 职场文书
Python OpenCV快速入门教程
2021/04/17 Python
python3.7.2 tkinter entry框限定输入数字的操作
2021/05/22 Python
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers