Bootstrap datetimepicker and bootstrap validator
最近在项目中使用bootstrap3.3.4作为前端框架,bootstrap validator作为表单验证插件,bootstrap-datetimepicker作为时间选择插件。
但当用bootstrap-datetimepicker选择完时间后bootstrap validator并没有反应,只有在点击时间选择输入框并进行插入/删除操作时bootstrap validator才出现响应。贴出代码如下:
html code:
[html]
[/html]
js code:
[js]
$(document).ready(function () {
$(‘#form’).bootstrapValidator({
feedbackIcons: {
valid: ‘glyphicon glyphicon-ok’,
invalid: ‘glyphicon glyphicon-remove’,
validating: ‘glyphicon glyphicon-refresh’
},
fields: {
datatime: {
validators: {
date: {
format: ‘DD/MM/YYYY’,
message: ‘The format is dd/mm/yyyy’
},
notEmpty: {
message: ‘The field can not be empty’
}
}
}
}
});
});
$(‘#datetime’).datetimepicker({
format: ‘yyyy-mm-dd hh:ii’,
language: ‘zh-CN’,
autoclose: true,
});
[/js]
问题及解决方法:
在使用bootstrap validator和其他插件(bootstrap datetimepicker)的同时,当插件执行完毕后需要调用bootstrap validator重新验证。
方案:
[js]
$(‘#datetime’)
.on(‘changeDate show’, function(e) {
// Revalidate the date when user change it
$(‘#form’).bootstrapValidator(‘revalidateField’, ‘datetime’);
});
[/js]
bootstrap validator文档:datetimepicker example
Bootstrap datetimepicker and bootstrap validator
https://ldsun.com/2015/04/17/Bootstrap-datetimepicker-and-bootstrap-validator/