改写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>

效果图：

巴特西

改写jquery.validate.unobtrusive.js实现气泡提示mvc错误

最新文章

热门文章