bootstrap-datepicker与bootstrapVa

首先给出 HTML 和 JS 的代码

HTML

<form id="form-data" role="form" action="${pageContext.request.contextPath}/admin/movie/add" method="post" enctype="multipart/form-data">
    <div class="box-body">                
        <div class="form-group">
            <label for="input_release_time">上映时间</label>
            <input name="release_time" type="text" class="form-control" id="input_release_time"
                   placeholder="请选择上映时间！">
        </div>
    </div>
    <div class="box-footer">
        <button type="submit" class="btn btn-primary">添加</button>
    </div>
</form>

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同时使用时，选择日期后，无法正常触发校验