问题描述

使用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输入框赋值时候，结果如下，验证状态没有发生改变

image.png

解决办法

通过查找资料最后找到了解决办法，直接上修改后的代码，仔细看可以发现下面的代码就是在验证属性里面加了【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>

最后执行结果如图

image.png