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