網管轉職程式開發的學習筆記

原先的做法是使用 JQuery Validate 來做前端驗證，把錯誤訊息會直接長在Html element的後面

這作法堪用，但是會把原本畫面的版型破壞

所以改利用搭配Bootstrap來把錯誤訊息改成彈跳在被驗證錯誤的Html element上面

我透過 validate 裡面的 showErrors 來取得錯誤的清單(errorList)跟成功的清單(this.successList)

錯誤清單內是一個物件的陣列，每個物件會長這樣 :(錯誤訊息、Html element、驗證的method)

{message: "請輸入數字", element: input#userID.required.number.error, method: "number"}

 

var form = $("#form");
form.validate({ 
showErrors: function (errorMap, errorList) {
                $(errorList).each(function (index, errObj) {
                    //驗證成功
					//tooltip選項
                    var option = {
                        trigger : 'click hover focus manual',
                        placement:'right',
                        title:errObj.message
                    }
                    $(errObj.element).tooltip('destroy');//必要，如果你有多條規則驗證，
                    //像是required number放在一起，如果不先清除的話，訊息會一直重複上一次的
                    $(errObj.element).tooltip(option);
                    $(errObj.element).on('shown.bs.tooltip', function () {
                        setTimeout(function () {
                            $(errObj.element).tooltip('hide');
                        }, 3000);
                    });
                    $(errObj.element).tooltip('show');
                    $(errObj.element).addClass('error');
                 
                })
                $(this.successList).each(function (index, element) {
					//驗證成功
                    $(element).tooltip('destroy');
                    $(element).removeClass('error');
                })
            }
});