CSS部分
<style type="text/css">
.hide {display:none;}
.poptip {
position: absolute;
top: 20px;
left:20px;
padding: 6px 10px 5px;
*padding: 7px 10px 4px;
line-height: 16px;
color: #DB7C22;
font-size: 12px;
background-color: #FFFCEF;
border: solid 1px #FFBB76;
border-radius: 2px;
box-shadow: 0 0 3px #ddd;
}
.poptip-arrow {
position: absolute;
overflow: hidden;
font-style: normal;
font-family: simsun;
font-size: 12px;
text-shadow:0 0 2px #ccc;
}
.poptip-arrow em,.poptip-arrow i {
position: absolute;
left:0;top:0;
font-style: normal;
}
.poptip-arrow em {
color: #FFBB76;
}
.poptip-arrow i {
color: #FFFCEF;
text-shadow:none;
}
.poptip-arrow-top,.poptip-arrow-bottom {
height: 6px;
width: 12px;
left:12px;
margin-left:-6px;
}
.poptip-arrow-left,.poptip-arrow-right {
height: 12px;
width: 6px;
top: 12px;
margin-top:-6px;
}
.poptip-arrow-top {
top: -6px;
}
.poptip-arrow-top em {
top: -1px;
}
.poptip-arrow-top i{
top: 0px;
}
.poptip-arrow-bottom {
bottom: -6px;
}
.poptip-arrow-bottom em {
top: -8px;
}
.poptip-arrow-bottom i {
top: -9px;
}
.poptip-arrow-left {
left:-6px;
}
.poptip-arrow-left em {
left:1px;
}
.poptip-arrow-left i {
left:2px;
}
.poptip-arrow-right {
right:-6px;
}
.poptip-arrow-right em {
left:-6px;
}
.poptip-arrow-right i {
left:-7px;
}
</style>
改写jquery.validate.unobtrusive.js中的onerror方法：
//气泡错误提示
function CPos(left, top) {
this.left = left;
this.top = top;
} function GetObjPos(ATarget) {
var target = ATarget;
var pos = new CPos(target.offsetLeft, target.offsetTop); var target = target.offsetParent;
while (target) {
pos.left += target.offsetLeft;
pos.top += target.offsetTop; target = target.offsetParent
}
return pos;
}
//气泡错误提示结束
function onError(error, inputElement) { // 'this' is the form element
var container = $(this).find("[data-valmsg-for='" + inputElement[0].name + "']"),
replace = $.parseJSON(container.attr("data-valmsg-replace")) !== false; container.removeClass("field-validation-valid").addClass("field-validation-error");
error.data("unobtrusiveContainer", container);
//气泡错误提示
var pos = GetObjPos(inputElement[0]);
if (error.text().length > 0) {
if ($("[popupfor='" + inputElement[0].name + "']").length == 0) {
$(document.body).append("<div class=\"poptip\" popupfor=\"" + inputElement[0].name + "\" style=\"top: " + (pos.top + inputElement.height()) + "px;left:" + pos.left + "px;\"><span class=\"poptip-arrow poptip-arrow-top\"><em>◆</em><i>◆</i></span>" + error.text() + "</div>");
}
else {
$("[popupfor='" + inputElement[0].name + "']").contents().filter(function () {
return this.nodeType == 3;
}).replaceWith(error.text());
}
$("div[popupfor='" + inputElement[0].name + "']").show();
}
else {
$("div[popupfor='" + inputElement[0].name + "']").hide();
}
//气泡错误提示结束
if (replace) {
container.empty();
error.removeClass("input-validation-error").appendTo(container);
}
else {
error.hide();
}
}
红色的是改写部分
然后cshtml中我使用了个隐藏的div，把这个@Html.ValidationMessageFor给包起来。
.hide {display:none;}
<div class="hide">@Html.ValidationMessageFor(model => model.XXX)</div>
效果图：