在使用BootStrap 3.3.7、BootStrap-Validator 0.5.3和BootStrap-datetimepicker 2.4.4时，遇到一个验证问题。当页面加载时，即使不操作直接验证，也会显示错误提示。在选择日期后，错误提示无法清除，导致表单验证失败，无法提交。为了解决这个问题，需要手动添加代码以触发验证。例如，在datetimepicker的'changeDate'事件中调用bootstrapValidator的相关方法进行重新验证。
各插件版本信息：
jQuery: 3.4.1 | BootStrap: 3.3.7 | BootStrap-Validator: 0.5.3 | BootStrap-datetimepicker: 2.4.4
这是工作中遇到的问题，BootStrapValidator和BootStrap-datetimepicker在一起使用时会遇到无法验证的问题。问题：进入页面时不进行任何操作进行验证，此时出现提示验证失败(废话)，之后再进行日期选择发现提示无法消除，验证仍然失败。
此时不管日期控件中选择任何日期，表单都不会自动验证，所以提交按钮无效，表单无法提交。
引入的插件CDN
HTML结构和样式
用户名：
地址：
出生日期：
提交
.form-container {
padding: 20px;
}
.form-group {
width: 300px;
}
.position {
position: relative;
}
此时我们需要手动添加代码使触发再次验证。代码如下：
// 1# 在初始化时在后面添加一段代码
$('#birthday').datetimepicker({
format: 'yyyy-mm-dd',
autoclose: true,
language: 'zh-CN'
}).on('changeDate', function () {
$('#validatorForm')
.data('bootstrapValidator')
.updateStatus('birthday', 'NOT_VALIDATED', null)
.validateField('birthday');
});
// 2# 时间控件输入框添加绑定事件
$(document).on('changeDate', '#birthday', function () {
$('#validatorForm')
.data('bootstrapValidator')
.updateStatus('birthday', 'NOT_VALIDATED', null)
.validateField('birthday');
});
$(function () {
$('#validatorForm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
userName: {
validators: {
notEmpty: {
message: '该项不能为空'
}
}
},
address: {
validators: {
notEmpty: {
message: '该项不能为空'
}
}
},
birthday: {
// 3# 在验证时添加如下代码
trigger: 'changeDate',
validators: {
notEmpty: {
message: '该项不能为空'
}
}
}
}
})
});
以上共有三种方法使之触发再次验证，这些方法中，changeDate换成change也是可行的。本文的源码在此。
扫一扫
344
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
