問題描述

使用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