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>


效果展示











bootstrap validator 使用笔记

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

bootstrapValidator不触发校验

一、前言 BootstrapValidator是基于bootstrap3的jquery表单验证插件,是最适合bootstrap框架的表单验证插件,在工作中用到此框架就写下自己在使用中积累的一些心得 ...
  • biedazhangshu
  • biedazhangshu
  • 2016年02月24日 13:15
  • 16230

bootstrapValidator与My97日期校验

bootstrapValidator my97 数据校验
  • u011097980
  • u011097980
  • 2017年01月22日 14:44
  • 845

My97DatePicker日历实现开始日期小于结束日期验证

最近做一个项目遇到个问题, 就是有开始ri'qi
  • yx13649017813
  • yx13649017813
  • 2014年04月18日 21:49
  • 2378

Bootstrap 表单验证formValidation 之比较两个input值的大小

老规矩先上效果图 A两个input必须满足大于10; B当输入其中一个input时,且满足A条件,如果另一个input为空,这个文本框通过; C最小时长...
  • u012123026
  • u012123026
  • 2017年06月02日 10:01
  • 2655

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

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

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

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

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

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

jquery validate验证比较日期

表单提交时,经常会需要对日期进行验证,比如结束时间必须大于开始时间。 这个时候可以通过jquery validate 自定义一个验证方法,进行验证。 方法如下, $.validator.add...
  • BluRohan
  • BluRohan
  • 2016年07月02日 21:31
  • 3650

bootstrap-datepicker相关问题解决

问题一:modal中无法显示datepicker
  • Ericdm
  • Ericdm
  • 2014年07月11日 19:09
  • 2821
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:bootstrap-datepicker 与bootstrapValidator同时使用时,选择日期后,无法正常触发校验
举报原因:
原因补充:

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