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>

效果图：