po主在使用Bootstrap验证表单内容时遇到很奇怪的问题,自动提交表单。
大概描述一下问题:
1. 我们这个form要求是有两个切换卡,而且两个切换卡里的input框要在一个form里同时提交到后台,那么就遇到个问题,在点击第二步时候要把第一步的内容校验掉,不校验第二步切换卡里的input。我是这么做的,当页面初始化的时候,先把第二步里的input的属性改为不去校验具体代码如下:
function setNextFiledDisenable(){
//设置第二步字段不进行校验
$('#form1').data('bootstrapValidator').enableFieldValidators('resourceItem.productName', false);
$('#form1').data('bootstrapValidator').enableFieldValidators('resourceItem.productName', false);
...
}
当点击第二步的时候再把第二步里的input改为必须校验,方法如上,只是false改为true。
当点击第一步的时候再把第二步里的input改为非必须校验,方法如上,设置成false
然后问题来了,当我第一步里的input输入完后,进入第二步。测试了一下点提交,上面的方法有效,表单无法提交。然后我再点第一步(这里已经是第二步里的input改为必须校验)。
当我再点第二步的时候表单居然自动提交了!!!
解决方法如下:
给bootstrapValidator绑定on方法,代码如下
$('#form1').bootstrapValidator({
excluded:[":disabled"], //只对禁用域不进行验证
message: '',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
},
}).on('success.form.bv', function(e) {
// 阻止默认事件提交
e.preventDefault();
});;
2. 当我用Bootstrap的日期控件时,发现日期控件每次选择后不会去校验文本框,原因是bootstrap触发验证是要在input输入框内输入改变后才会去校验,那我们就用bootstrap日期控件的隐藏日期框时触发校验事件
$(".form-date").datetimepicker(
{
startDate:new Date(),
language: "zh-CN",
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0,
format: "yyyy-mm-dd"
}).on('hide',function(e) {
$(form1).data('bootstrapValidator')
.updateStatus('batch.bidDayStr', 'NOT_VALIDATED',null)
.validateField('batch.bidDayStr');
});
主要是后面重写datetimepicker的hide方法,更新form的校验状态为未验证 用法为$(form1).data('bootstrapValidator').updateStatus('字段名', 'NOT_VALIDATED',null) .validateField('字段名'); 这样在隐藏日期框时validator就会去重新校验这个字段。
updateStatus('Filedname',‘options’,validatorName)后面options 可以为 NOT_VALIDATED ,INVALIDA ,VALIDA 。
这里同样有用到,当我们自己触发一种自定义校验时,可以用INVALIDA 和VALIDA来更新校验状态,比如
$(form1).data('bootstrapValidator')
.updateStatus('batch.startTimeStr', 'INVALID',null);
这里就是更新 batch.startTimeStr校验为非法。