首先给出 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 方法的作用是触发给定字段的校验
