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

Author

Ludis

Posted on

2015-04-17

Updated on

2015-04-17

Licensed under

Comments