使用JQuery.validate後的bootstrap風格校驗提示‏

由於項目使用了bootstrap框架，在作form提交時須要進行驗證。原本研究了一下午jqBootstrapValidator，但是很差用，最終仍是想用JQuery validate。

其實最主要就是showErrors方法，自定義了bootstrap風格的浮動提示框，避免了在本身html中定義一個span或是p，來顯示error message。

至於validate的rules，在js中就沒有寫了，我是在input的class標籤中定義的。

此外，還要注意的就是項目後臺使用了struts2，因此個人form中全部的name都是 Userform.name這樣的寫的，如是想在js中定義校驗規則，須要加上引號。

$('#form').validate({
       showErrors: function(errorMap, errorList) {
           $.each(this.successList, function(index, value) {
             return $(value).popover("hide");
           });
           return $.each(errorList, function(index, value) {
             var _popover;
             _popover = $(value.element).popover({
                   trigger: "manual",
                   placement: "top",
                   content: value.message,
                    template: "<div class=\"popover\">
                                <div class=\"arrow\"></div>
                                <div class=\"popover-inner\">
                                <div class=\"popover-content\"><p></p></div>
                            </div></div>"
             });
             _popover.data("bs.popover").options.content = value.message;
             return _popover.popover("show");
           });
         },
         
         submitHandler: function(){  
            $.ajax({ 
                url : "opera_addRecord", // 請求url
                type : "post", // 提交方式
                dataType : "json", // 數據類型
                data : $('#form').serialize(),// 參數序列化
                success : function(data) { // 提交成功的回調函數
                    // 成功刪除後刷新頁面
                    if (data == "SUCCESS") {
                        alert("數據已成功保存！");
                        $('#modal-table').modal('hide');
                    } else {
                        showMsgDialog(data);
                    }
                    jQuery("#grid-table").trigger("reloadGrid");
                }
            });
         }
    });