改寫jquery.validate.unobtrusive.js實現氣泡提示mvc錯誤

個人對於這個js、css不是很擅長，所以這個氣泡提醒的樣式網上找了下，用了這個http://www.cnblogs.com/wifi/articles/2918950.html當中的第一種寫法。

對於mvc中默認的錯誤提示，是使用@Html.ValidationMessageFor這個來生成個<span class="field-validation-valid" data-valmsg-for="XXX" data-valmsg-replace="true"></span>這種的html標簽，但是對於span首先它得占頁面的空間，而且我需要它里面有字的時候才顯示，沒字的時候就得隱藏，css不好弄，所以就得改這個jquery.validate.unobtrusive.js來實現。

(當然mvc中錯誤提示還有@Html.ValidationSummary，不過這個我發現它都是頁面回發的時候才會變化的，所以我可以在頁面load出來的時候就能夠判斷到里面有沒有文字，然后再去控制如何顯示出來，這個實現起來就比較簡單，也不用去改動源碼啥的，這里就不提了。)

我改的jquery.validate.unobtrusive.js中的onerror方法：

 1     function CPos(left, top) {
 2         this.left = left;
 3         this.top = top;
 4     }
 5 
 6     function GetObjPos(ATarget) {
 7         var target = ATarget;
 8         var pos = new CPos(target.offsetLeft, target.offsetTop);
 9 
10         var target = target.offsetParent;
11         while (target) {
12             pos.left += target.offsetLeft;
13             pos.top += target.offsetTop;
14 
15             target = target.offsetParent
16         }
17         return pos;
18     }

    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]);
28         if (error.text().length > 0) {
29             if ($("[popupfor='" + inputElement[0].name + "']").length == 0) {
30                 $(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>");
31             }
32             else {
33                 $("[popupfor='" + inputElement[0].name + "']").contents().filter(function () {
34                     return this.nodeType == 3;
35                 }).replaceWith(error.text());
36             }
37             $("div[popupfor='" + inputElement[0].name + "']").show();
38         }
39         else {
40             $("div[popupfor='" + inputElement[0].name + "']").hide();
41         }

        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>

效果圖：