I'm using JQuery Validation plugin-v1.11.1, and the message tip is modified to div:
, with the modified code:
1, modify the Unhighlight method:
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, add to get absolute positioning location method:
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. Add scrolling hints follow the scrolling and hiding tips method
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;
}
Rolling
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");
});
}
Hide
$ (". 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, modify the ShowLabel method:
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) {
Modify Prompt content
S.children (). EQ (2). HTML (i)
Reset Location
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 + +) + "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>
!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, modify the Defaultshowerrors method, add registration tips scrolling and Hiding methods
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 ()
},
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
JQuery Validation Plugin Tip Modify to use bootstrap for bubbles
