标签:
因为项目使用了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