1. 程式人生 > >BootstrapValidator表單驗證無法提交問題

BootstrapValidator表單驗證無法提交問題

用BootstrapValidator做表單驗證遇見點選submit和未執行action的情況,看網上都是加個點選事件,然後$("id").submit(),既繁瑣又不好用,幾經查詢發現BootstrapValidator驗證有給提交按鈕de

的屬性: submitButtons: "提交按鈕ID",下面貼出演示程式碼

1.html頁面

<form action="#" method="post" role="form" id="myform">
    <div class="form-group">
        <label for="">label</label>
        <input type="text" class="form-control" id="text" name="username" placeholder="請輸入姓名">
    </div>
    <button id="mytest" type="submit" class="btn btn-primary">Submit</button>
</form>

2.js頁面

$("#myform).bootstrapValidator({
        live: 'enabled',//enabled是內容有變化就驗證(預設),disabled和submitted是提交再驗證
        excluded: [':disabled', ':hidden', ':not(:visible)'],//排除無需驗證的控制元件
        submitButtons: '#loginSubmit',              //指定提交按鈕
        message: '通用的驗證失敗訊息',
        feedbackIcons: {                            //根據驗證結果顯示的各種圖示
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            username: {
                validators: {
                    notEmpty: {                    //檢測非空
                        message: '請輸入內容'
                    },
                    stringLength: {                //檢測長度
                        min: 6,
                        max: 30,
                        message: '長度必須在6-30之間'
                    }
                }
            }
        }
    });