个人对于这个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 } 19 20 function onError(error, inputElement) { // 'this' is the form element 21 var container = $(this).find("[data-valmsg-for='" + inputElement[0].name + "']"), 22 replace = $.parseJSON(container.attr("data-valmsg-replace")) !== false; 23 24 container.removeClass("field-validation-valid").addClass("field-validation-error"); 25 error.data("unobtrusiveContainer", container); 26 27 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 } 42 43 if (replace) { 44 container.empty(); 45 error.removeClass("input-validation-error").appendTo(container); 46 } 47 else { 48 error.hide(); 49 } 50 }
红色的是我加的,代码比较简单。
然后cshtml中我使用了个隐藏的div,把这个@Html.ValidationMessageFor给包起来。
.hide {display:none;}
<div class="hide">@Html.ValidationMessageFor(model => model.XXX)</div>
效果图: