bootstrap-datepicker与bootstrapValidator同时使用时无法触发校验的解决办法

首先给出 HTML 和 JS 的代码

HTML

    
                
        

            上映时间
            
        
    
    

        添加
    

JS

$("#input_release_time").datepicker({
    autoclose: true,
    todayHighlight : true,
    format: 'yyyy-mm-dd',
    language: 'zh-CN'
});

$('#form-data').bootstrapValidator({
    fields: {
        release_time: {
            validators: {
                notEmpty: {
                    message: '上映时间不能为空'
                }
            }
        }
    }
});

我给上映时间添加的非空验证

如果没有填写上映时间，直接点击提交按钮，会显示提示信息

于是，点击上映时间的 input，把时间填入

但是没有触发校验，表单验证仍然不通过

解决思路

需要在 bootstrap-datepicker 关闭的时候，重新触发一下 bootstrapValidator 的校验

代码

把 bootstrap-datepicker 的配置代码改一下，增加一个 datepicker 隐藏时的回调

$("#input_release_time").datepicker({
    autoclose: true,
    todayHighlight : true,
    format: 'yyyy-mm-dd',
    language: 'zh-CN'
}).on('hide',function(e) {
    $('#form-data').data('bootstrapValidator')
        .updateStatus('release_time', 'NOT_VALIDATED', null)
        .validateField('release_time');
});

updateStatus 方法的作用是更新给定字段的校验状态

validateField 方法的作用是触发给定字段的校验

文档

• bootstrap-datepicker
• bootstrapvalidator
• bootstrapvalidator - validators

参考

• bootstrap-datepicker 与bootstrapValidator同时使用时，选择日期后，无法正常触发校验