bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路_javascript技巧

一、前言

使用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方法的作用是更新给定字段的校验状态,官方介绍如下:

validateField方法的作用是触发给定字段的校验

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同时使用时选择日期后无法正常触发校验的解决思路,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索bootstrapvalidator
bootstrapdatepicker
bootstrap datepicker、bootstrap3datepicker、bootstrapdatepicker、bootstrapdatepicker3、bootstrapdate picker,以便于您获取更多的相关知识。

时间: 2024-10-15 03:25:56

bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路_javascript技巧的相关文章

BootstrapValidator不触发校验的实现代码_javascript技巧

一.前言 BootstrapValidator是基于bootstrap3的jquery表单验证插件,是最适合bootstrap框架的表单验证插件,在工作中用到此框架就写下自己在使用中积累的一些心得 二.问题描述 当按钮的类型为submit时,使用bootstrapValidator的isValid()能够使验证表单正常工作,但当button的type类型为button时,只调用bootstrapValidator的isValid()方法无法正常工作.这时候就需要使用bootstrapValida

BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法_javascript技巧

最近的一个项目 前台使用了 bootstrap.css + angularjs, 后台只处理数据(用的php,处理结果直接 json_encode($arr),非常爽).一直在Chrome的仿真机测试非常完美, 没有进行真机测试.完成后,到手机测试时傻了,左右滑动页面时,竟然出现了一个 空白的竖条(如下图所示).判断是margin-right 设置的长度所致,检查css,并没有相关代码.看来问题出现在了 bootstrap .虽然不影响 程序的使用,但是感觉非常别扭,一定要修复它. 检查页面,发

全系IE支持Bootstrap的解决方法_javascript技巧

最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在chrome,firefox,safari,opera,360浏览器(极速模式).搜狗浏览器等浏览器下均没有问题,而在IE8及IE11下发现样式无法显示,然后各种百度啊,最后在一个网友帖子的帮助下解决了问题,先将解决方法总结如下: 首先需要确保你的HTML页面开始部分要有DOCTYPE声明.DOCTYPE告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档,具体会影响: 对标记attribu

PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法_php技巧

本文实例讲述了PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法.分享给大家供大家参考.具体分析如下: PHP 连接 MSSQL 的新手经常遇到这个问题:数据库里面的 nvarchar 字段中数据一切正常,但是用 PHP 查询出来却发现长度只有 255,我们都知道,在 MySQL 里面 varchar 的长度只有 255,但是 MSSQL 却不是,不会是 PHP 将 nvarchar 按照 MySQL 的 varchar 处理了吧. 本文给出了解决方法: 复制代码 代码如下:

基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法_javascript技巧

基于Bootstrap做的下拉菜单在电脑浏览器中可正常使用,在手机浏览器中能弹出下拉列表,却不能选择列表中的菜单项,通过自己百度查找原因将bootstrap脚本文件中的ontouchstart 替换为 disable-ontouchstart可以解决,替换后并不能解决.(红米手机UC浏览器不支持,小米手机UC浏览器正常,其他暂时未测试) jquery:v1.11.2 bootstrap:v3.3.4 以下为前台页面代码: <div class="input-group">

JSON.stringify转换JSON时日期时间不准确的解决方法_javascript技巧

调用JSON.stringify将对象转为对应的字符串时,如果包含时间对象,时间对象会被转换为国家标准时间(ISO),而不是当前国家区域的时间,测试代码如下: 复制代码 代码如下: <script>     //var o = new Date();     //console.log(o.toString())//中国时区时间,格式如"Wed Jun 11 2014 10:51:42 GMT+0800"     //console.log(JSON.stringify(o

Bootstrap组件系列之福利篇几款好用的组件(推荐二)_javascript技巧

在上篇文章给大家介绍了Bootstrap组件系列之福利篇几款好用的组件(推荐),接下来本文给大家介绍Bootstrap组件系列之福利篇几款好用的组件(推荐二),感兴趣的朋友一起学习吧!  七.多值输入组件manifest 关于文本框的多值输入,一直是一个比较常见的需求,今天博主推荐一款好用的多值输入组件给大家,不要谢我,请叫我"红领巾"! 1.效果展示 本地多值输入框 远程多值输入框 2.源码说明 感谢开源社区,感谢那些喜欢分享的可爱的人儿.开源地址. 3.代码示例 (1)本地多值输入

js获取指定日期周数以及星期几的小例子_javascript技巧

JS获取日期时遇到如下需求,根据某年某周获取一周的日期.如开始日期规定为星期四到下一周的星期五为一周. 代码如下: function getNowFormatDate(theDate) { var day = theDate; var Year = 0; var Month = 0; var Day = 0; var CurrentDate = ""; // 初始化时间 Year= day.getFullYear();// ie火狐下都可以 Month= day.getMonth()+

网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法_javascript技巧

网站发布到IIS后,发现网站使用的Bootstrap框架所引用的woff字体无法正常显示.于是跟踪http请求,发现woff字体请求出现GET .woff 404 (Not Found)的问题,但是项目中woff字体的文件并未丢失.后经排查,原来是服务器上IIS没有添加woff字体的MIME类型,导致发送HTTP请求时,IIS无法处理和识别此类型的文件. 解决方法1:在Web.config配置文件中添加woff字体的MIME类型 解放方法2:在IIS中添加woff字体的MIME类型 woff字体