我使用的是 jQuery Validation Plugin - v1.11.1，消息提示修改为div,效果图：
,附上修改代码：
1、修改unhighlight方法：
unhighlight : function (e, i, s) {
"radio" === e.type ? this.findByName(e.name).removeClass(i).addClass(s) : t(e).removeClass(i).addClass(s);
if ($("[for=‘" + e.id + "‘]") && $(e).hasClass("valid")) {
$("[for=‘" + e.id + "‘]").hide();
}
}
2、添加获取绝对定位位置方法：
getAbsolutePos : function (el) {
var sl = 0,
st = 0;
if (el.scrollLeft && el.scrollTop) {
sl = el.scrollLeft;
st = el.scrollTop;
}
var r = {
x : el.offsetLeft - sl,
y : el.offsetTop - st
};
if (el.offsetParent) {
var tmp = this.getAbsolutePos(el.offsetParent);
r.x += tmp.x;
r.y += tmp.y;
}
return r;
},
3、添加滚动提示跟随滚动和隐藏提示方法
scrollLocation : function (vform) {
function getAbsolutePos(el) {
var sl = 0,
st = 0;
if (el.scrollLeft && el.scrollTop) {
sl = el.scrollLeft;
st = el.scrollTop;
}
var r = {
x : el.offsetLeft - sl,
y : el.offsetTop - st
};
if (el.offsetParent) {
var tmp = getAbsolutePos(el.offsetParent);
r.x += tmp.x;
r.y += tmp.y;
}
return r;
}
//滚动
var ct = document.body.scrollTop;
var ceng = $(this.currentForm).find(".in");
window.onscroll = function () {
var st = vform != "" ? document.body.scrollTop : 0;
var input = ceng.find("div > .error");
input.each(function (n) {
var p = getAbsolutePos(this);
var lt = 0;
if ($("[for=‘" + this.id + "‘]").text().length > 15) {
lt = 62
} else {
lt = 42;
}
$("[for=‘" + this.id + "‘]").css("top", (p.y + st - lt) + "px");
});
}
//隐藏
$(".modal-backdrop").click(function () {
var input = $("div > .error");
input.each(function (n) {
$(this).removeClass("error");
$(this).addClass("valid");
$("[for=‘" + this.id + "‘]").hide();
});
});
ceng.find("[aria-hidden=‘true‘]").click(function () {
var input = ceng.find("div > .error");
input.each(function (n) {
$(this).removeClass("error");
$(this).addClass("valid");
$("[for=‘" + this.id + "‘]").hide();
});
});
},
4、修改showLabel方法：
showLabel : function (e, i) {
var ceng = $(this.currentForm).find(".in");
this.scrollLocation();
var st = ceng && ceng[0] ? document.body.scrollTop : 0;
var p = this.getAbsolutePos(e);
var s = $("[for=‘" + this.idOrName(e) + "‘]");
var lt = 0;
var lft = 0;
if (i.length > 15) {
lt = 62;
lft = -20;
} else {
lft = e.offsetWidth / 3;
lt = 42;
}
if (s != null && s[0] != null) {
//修改提示内容
s.children().eq(2).html(i)
//重置位置
s.css("top", (p.y + st - lt) + "px");
$(s).show();
return false;
}
s.length ? (s.removeClass(this.settings.validClass).addClass(this.settings.errorClass), s.children().eq(2).html(i)) :
(s = t("<" + this.settings.errorElement + ">").attr("style", "position:absolute;z-index:" + ((ceng && ceng[0] ? ceng.css("zIndex") : 0) + 100) + ";top:" + (p.y - lt + st) + "px; left:" + (p.x + lft) + "px; display: block;").addClass("popover
fade top in").attr("for", this.idOrName(e)).addClass(this.settings.errorClass).html(‘<div class="arrow"></div><h3 class="popover-title" style="display: none;"></h3><div class="popover-content">‘ + i + ‘</div>‘ || ""), this.settings.wrapper && (s = s.hide().show().wrap("<"
+ this.settings.wrapper + "/>").parent()), this.labelContainer.append(s).length || (this.settings.errorPlacement ? this.settings.errorPlacement(s, t(e)) : $(document.body).append(s))),
!i && this.settings.success && (s.text(""), "string" == typeof this.settings.success ? s.addClass(this.settings.success) : this.settings.success(s, e)),
this.toShow = this.toShow.add(s);
},
5、修改defaultShowErrors 方法，添加注册提示滚动和隐藏方法
defaultShowErrors : function () {
var t,
e;
for (t = 0; this.errorList[t]; t++) {
var i = this.errorList[t];
this.settings.highlight && this.settings.highlight.call(this, i.element, this.settings.errorClass, this.settings.validClass),
this.showLabel(i.element, i.message)
}
< span style = "background-color: rgb(255, 0, 0);" > this.scrollLocation();
if (this.errorList.length && (this.toShow = this.toShow.add(this.containers)), this.settings.success)
for (t = 0; this.successList[t]; t++)
this.showLabel(this.successList[t]);
if (this.settings.unhighlight)
for (t = 0, e = this.validElements(); e[t]; t++)
this.settings.unhighlight.call(this, e[t], this.settings.errorClass, this.settings.validClass);
this.toHide = this.toHide.not(this.toShow),
this.hideErrors(),
this.addWrapper(this.toShow).show()
},
版权声明：本文为博主原创文章，未经博主允许不得转载。