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 相关文章推荐
List the Stored Procedures in a SQL Server database
Jun 20 Javascript
javaScript Array(数组)相关方法简述
Jul 25 Javascript
基于jQuery的图片剪切插件
Aug 03 Javascript
JS实现支持Ajax验证的表单插件
Mar 24 Javascript
AngularJS的Filter的示例详解
Mar 07 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 Javascript
详解webpack loader和plugin编写
Oct 12 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
JS面向对象之多选框实现
Jan 17 Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 Javascript
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
使用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学习笔记 类的声明与对象实例化
2011/06/13 PHP
php使用fopen创建utf8编码文件的方法
2014/10/31 PHP
PHP中file_put_contents追加和换行的实现方法
2017/04/01 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
Aster vs KG BO3 第三场2.18
2021/03/10 DOTA
jsTree 基于JQuery的排序节点 Bug
2011/07/26 Javascript
用jQuery获取IE9下拉框默认值问题探讨
2013/07/22 Javascript
JavaScript中的substr()方法使用详解
2015/06/06 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
JS简单实现点击复制链接的方法
2016/08/03 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
2017/04/11 jQuery
bootstrap Table的一些小操作
2017/11/01 Javascript
微信小程序表单验证功能完整实例
2017/12/01 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
js replace 全局替换的操作方法
2018/06/12 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
深入解析vue 源码目录及构建过程分析
2019/04/24 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
JavaScript实现点击切换功能
2021/01/27 Javascript
[55:04]海涛DOTA2死魂复燃6.82版本介绍
2014/09/28 DOTA
python缩进区别分析
2014/02/15 Python
如何用itertools解决无序排列组合的问题
2017/05/18 Python
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
python实现验证码识别功能
2018/06/07 Python
浅谈tensorflow中几个随机函数的用法
2018/07/27 Python
Python骚操作之动态定义函数
2019/03/26 Python
网易2016研发工程师编程题 奖学金(python)
2019/06/19 Python
react+django清除浏览器缓存的几种方法小结
2019/07/17 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
一年级语文下册复习计划
2015/01/17 职场文书
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python
MySQL数据库必备之条件查询语句
2021/10/15 MySQL