bootstrapvalidat cdn_【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结构和样式

用户名：

地址：

出生日期：

提交

.form-container {

padding: 20px;

}

.form-group {

width: 300px;

}

.position {

position: relative;

}

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

// 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也是可行的。本文的源码在此。