使用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");
                }
            });
         }
    });