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

青旅半醒 2023-06-27 05:57 28阅读 0赞

场景：

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1NjI2NTU5_size_16_color_FFFFFF_t_70][]

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

解决办法：

在网上找的方法，大致分为两种：

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1NjI2NTU5_size_16_color_FFFFFF_t_70 1][]

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

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

![20200104135401378.png][]

依据的是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 校验不触发的排查和解决方法，最终发现 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][bootstrap-validator]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1NjI2NTU5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200104115906925.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1NjI2NTU5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1NjI2NTU5_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200104135111603.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1NjI2NTU5,size_16,color_FFFFFF,t_70
[20200104135401378.png]: https://img-blog.csdnimg.cn/20200104135401378.png
[bootstrap-validator]: https://blog.csdn.net/qq_35473192/article/details/82887754