天天看点

解决bootstrapValidator 与 datetimepicker 组合使用,二次校验日期验证不会刷新问题

场景:

        最近接到反馈,页面表单未输入内容,直接点击保存,然后日期选择框选择日期,但页面校验还是没有刷新,一直显示错误提示信息,且页面表单无法提交,如下图。

解决bootstrapValidator 与 datetimepicker 组合使用,二次校验日期验证不会刷新问题

页面表单采用 bootstrapValidator 插件用做前端表单验证,日期选择器采用的是 bootstrap 的 datetimepicker 。两者结合使用,在表单日期第一次校验出错,再次修改提交后,校验状态和校验信息都不会更新,并且 bootstrapValidator  校验一直处于失败状态,阻止页面表单提交。对这个问题花了快一上午的时间,不停的在网上找解决方案并在本地修改尝试,终于功夫不负有心人,找到了一个比较满意的解决方案,特此记录下。

解决办法:

    在网上找的方法,大致分为两种:

    第一种:校验属性中加入trigger='change' 或针对时间控件的 trigger='changeDate',如下图

解决bootstrapValidator 与 datetimepicker 组合使用,二次校验日期验证不会刷新问题

这个我试了,一直没效果,不知道是不是搭配其他的修改方法。

第二种:通过监听时间控件的 changeDate 方法,手动触发 bootstrapValidator 进行重新校验,如下图:

解决bootstrapValidator 与 datetimepicker 组合使用,二次校验日期验证不会刷新问题

依据的是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

继续阅读