【BootStrap】BootStrapValidator无法自动验证BootStrap-datetimepicker的坑

各插件版本信息：

jQuery: 3.4.1 | BootStrap: 3.3.7 | BootStrap-Validator: 0.5.3 | BootStrap-datetimepicker: 2.4.4

这是工作中遇到的问题，BootStrapValidator和BootStrap-datetimepicker在一起使用时会遇到无法验证的问题。问题：进入页面时不进行任何操作进行验证，此时出现提示验证失败（废话），之后再进行日期选择发现提示无法消除，验证仍然失败。

此时不管日期控件中选择任何日期，表单都不会自动验证，所以提交按钮无效， 表单无法提交。

引入的插件CDN

HTML结构和样式

    

      

        用户名：
        
      

      

        地址：
        
      

      

        出生日期：
        
      

      提交
    
  
  
  

此时我们需要手动添加代码使触发 再次验证。代码如下：

// 1# 在初始化时在后面添加一段代码
$('#birthday').datetimepicker({
  format: 'yyyy-mm-dd',
  autoclose: true,
  language: 'zh-CN'
}).on('changeDate', function () {
  $('#validatorForm')
    .data('bootstrapValidator')
    .updateStatus('birthday', 'NOT_VALIDATED', null)
    .validateField('birthday');
});

// 2# 时间控件输入框添加绑定事件
$(document).on('changeDate', '#birthday', function () {
  $('#validatorForm')
    .data('bootstrapValidator')
    .updateStatus('birthday', 'NOT_VALIDATED', null)
    .validateField('birthday');
});

$(function () {
  $('#validatorForm').bootstrapValidator({
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      userName: {
        validators: {
          notEmpty: {
            message: '该项不能为空'
          }
        }
      },
      address: {
        validators: {
          notEmpty: {
            message: '该项不能为空'
          }
        }
      },
      birthday: {
          // 3# 在验证时添加如下代码
        trigger: 'changeDate',
        validators: {
          notEmpty: {
            message: '该项不能为空'
          }
        }
      }
    }
  })
});

以上共有三种方法使之触发再次验证，这些方法中， changeDate换成 change也是可行的。 本文的源码在此。