码迷,mamicode.com
首页 > Web开发 > 详细

使用JQuery.validate后的bootstrap风格校验提示?

时间:2015-05-29 14:09:12      阅读:553      评论:0      收藏:0      [点我收藏+]

标签:

因为项目使用了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");
                }
            });
         }
    });


使用JQuery.validate后的bootstrap风格校验提示?

标签:

原文地址:http://my.oschina.net/javaFresh/blog/422203

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!