场景:
最近接到反馈,页面表单未输入内容,直接点击保存,然后日期选择框选择日期,但页面校验还是没有刷新,一直显示错误提示信息,且页面表单无法提交,如下图。
页面表单采用 bootstrapValidator 插件用做前端表单验证,日期选择器采用的是 bootstrap 的 datetimepicker 。两者结合使用,在表单日期第一次校验出错,再次修改提交后,校验状态和校验信息都不会更新,并且 bootstrapValidator 校验一直处于失败状态,阻止页面表单提交。对这个问题花了快一上午的时间,不停的在网上找解决方案并在本地修改尝试,终于功夫不负有心人,找到了一个比较满意的解决方案,特此记录下。
解决办法:
在网上找的方法,大致分为两种:
第一种:校验属性中加入trigger='change' 或针对时间控件的 trigger='changeDate',如下图
这个我试了,一直没效果,不知道是不是搭配其他的修改方法。
第二种:通过监听时间控件的 changeDate 方法,手动触发 bootstrapValidator 进行重新校验,如下图:
依据的是bootstrap Validator 官方文档内容
$(form).data('bootstrapValidator')
.updateStatus(field, 'NOT_VALIDATED')
.validateField(field);
// Or
$(form).bootstrapValidator('updateStatus', field, 'NOT_VALIDATED')
.bootstrapValidator('validateField', field);
但这种方法 updateStatus 会报错,网上有文章说,这个方法已经被废弃了,不知真假。
继续寻找,在网上找到一位大神的博客《bootstrap-validator校验行为不触发的解决》,里面有大致介绍他遇到的bootstrap Validator 校验不触发的排查和解决方法,最终发现 bootstrap Validator 监听的是 input 事件。
txtDept.trigger('input');
将大神的方法,整合到页面的单个时间控件进行试验,发现如大佬所说的那样,这样可以手动触发bootstrap Validator 校验,达到了我预期的目标。
然而,因为当前前端表单校验都是采用 bootstrap Validator ,时间控件也都是 datetimepicker,虽然暂时我这个页面有反馈说有问题,但这问题肯定不是个案,一个个去改,太麻烦,而且很容易漏掉,不现实,需要全局处理,于是对刚刚的单个时间控件测试代码进行修改,并放在公共的js里面,供整个项目进行使用。
//监听时间控件的changeDate事件,解决bootstrapValidator 与 datetimepicker 组合使用,二次校验无效问题
$(document).on('changeDate', '.form_datetime input', function () {
$(this).trigger('input');
})
.form_datetime input 是查找我当前工程中,所有时间控件,每次时间改变都会触发 trigger('input') 事件。
《bootstrap-validator校验行为不触发的解决》https://blog.csdn.net/qq_35473192/article/details/82887754