MVC3.0修改jquery.validate.unobtrusive.js实现气泡提示mvc错误

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>

效果图：