问题描述
使用BootstrapValidator验证表单数据的时候,某些组件是通过js或者jQuery方式填入数据的,但是填入数据后并没有改变验证状态,代码如下所示:
<form action="add" id="dataForm" method="post" class="form-info" >
<input name="insideForwordName" id="insideForwordName" value="${pd.insideForwordName }" type="text" class="form-control input-sm" size="50">
</form>
<script type="text/javascript">
function fillData(){
$("#insideForwordName").val("测试8");
}
</script>
<script type="text/javascript">
//输入表单验证
$(function () {
$('form').bootstrapValidator({
message: 'This value is not valid',
excluded : [':disabled', ':not(:visible)'],//忽略不验证的项[':disabled', ':hidden', ':not(:visible)']
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
insideForwordName: {
message: '第三方验证失败',
validators: {
notEmpty: {
message: '请选择第三方'
}
}
}
}
});
});
</script>
当通过程序给input输入框赋值时候,结果如下,验证状态没有发生改变
解决办法
通过查找资料最后找到了解决办法,直接上修改后的代码,仔细看可以发现下面的代码就是在验证属性里面加了【trigger:"change", //监听change动作】这一行,以及在填入数据后加入这一行【$("#insideForwordName").change();//触发验证】
<form action="add" id="dataForm" method="post" class="form-info" >
<input name="insideForwordName" id="insideForwordName" value="${pd.insideForwordName }" type="text" class="form-control input-sm" size="50">
</form>
<script type="text/javascript">
function() fillData{
$("#insideForwordName").val("测试8");
$("#insideForwordName").change();//触发验证
}
</script>
<script type="text/javascript">
//输入表单验证
$(function () {
$('form').bootstrapValidator({
message: 'This value is not valid',
excluded : [':disabled', ':not(:visible)'],//忽略不验证的项[':disabled', ':hidden', ':not(:visible)']
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
insideForwordName: {
message: '第三方验证失败',
trigger:"change", //监听change动作
validators: {
notEmpty: {
message: '请选择第三方'
}
}
}
}
});
});
</script>
最后执行结果如图