bootstrap-datepicker 与bootstrapValidator同时使用时,选择日期后,无法正常触发校验

原创 2016年06月13日 14:45:57

一、前言

使用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>


效果展示











版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/biedazhangshu/article/details/51657292

bootstrapValidator与datetimepicker混合使用时日期验证不刷新

解决方式:在日期表单触发change方法时,验证表单('#date').change(function() { $('#form').data('bootstrapValid...
  • zcwforali
  • zcwforali
  • 2017-12-17 14:14:58
  • 520

bootstrap 组件学习之bootstrap validator

bootstrap 组件学习之bootstrap validator 1.项目目录 1. 源码和api地址 bootstrapvalidator源码:https://github...
  • zh4000
  • zh4000
  • 2016-11-18 23:24:20
  • 3043

BootstrapValidator 的使用

bootstrap 组件学习之bootstrap validator 1.项目目录 1. 源码和api地址 bootstrapvalidator源码:https://github.c...
  • zh4000
  • zh4000
  • 2016-11-18 22:08:23
  • 2975

bootstrapValidator与My97日期校验

bootstrapValidator my97 数据校验
  • u011097980
  • u011097980
  • 2017-01-22 14:44:37
  • 1166

bootstrap validator 使用笔记

最近做的项目,前台使用的bootstrap框架。对于前台框架来说,验证是必不可少的。对于常用的一些校验规则,如果有一个例子会更好的。虽然有提供validator的API,但是感觉不太好用。所以记录一下...
  • zc474235918
  • zc474235918
  • 2016-02-16 09:29:37
  • 13103

bootstrap-datepicker日历插件 与bootstrapValidator验证同时使用时无效

一、前言 使用bootstrap-datepicker和bootstrapValidator也有一段时间了,在工作中发现两者同时使用时会出现的一种问题,当选择完日期后,并不会正确校验该字段。为了...
  • wdvceafvcsrgfv
  • wdvceafvcsrgfv
  • 2017-07-09 07:13:07
  • 536

bootstrapValidator关于js赋值以及选择日期不触发验证解决办法

刚开始写博客,都说不写博客不能成为大神,这个习惯倒是不错,以前遇到问题一直在百度上问,是时候给别人做做贡献了,刚使用bootstrap框架,这个前端框架确实很厉害,不过因为一直是自己一个人研究,网上的...
  • qq_34332207
  • qq_34332207
  • 2017-06-11 18:56:33
  • 1168

Date Range Picker和bootstrapValidator同时使用时,选择日期后无法正常触发校验

在使用bootstrapValidator时,又同时使用了Date Range Picker,这时候就出现了,选择了日期后,bootstrapValidator不能正常通过校验, 如上图时间的选择会一...
  • zero_295813128
  • zero_295813128
  • 2016-09-28 14:27:22
  • 1856

Bootstrap3 datetimepicker控件的使用

Bootstrap3 日期+时间选择控件 1.支持日期选择,格式设定 2.支持时间选择 3.支持时间段选择控制 缺点:    目前没有中文包,只有英文版 官网地址:http://eonasdan.gi...
  • u011127019
  • u011127019
  • 2016-06-21 09:51:49
  • 71584

Bootstrap 表单验证formValidation 之表单动态验证

动态添加input并动态添加新验证方式! 知识点: 1 先去官网下载:http://formvalidation.io/ 2 导入文件,注意事项我就不多说了在远程验证那篇我已经讲过。 3 用到的关键...
  • u012123026
  • u012123026
  • 2016-11-22 17:18:06
  • 6736
收藏助手
不良信息举报
您举报文章:bootstrap-datepicker 与bootstrapValidator同时使用时,选择日期后,无法正常触发校验
举报原因:
原因补充:

(最多只允许输入30个字)