jQuery Validation Plugin提示修改为气泡使用bootstrap

我使用的是 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()

},