利用Jquery + Css，改善驗證控制項的顯示

2012-07-11

15459
0
.Net

微軟內建的驗證控制項，顯示的方式真的不是很明顯，所以常常會有使用者抱怨，沒注意到錯誤提示，

上網Google一下，找到國外有個很簡單方便的方式，所以筆記一下，也希望對別人有幫助。

來源：http://www.nobdy.com/asp-net/asp-net-validators-pimped-using-jquery/

我們要達到的目的如下：

首先增加CSS

/*驗正控制項CSS*/
   .validation-error *{color:Red;}
   .validation-error label{color:Red;}
   .validation-error input{border: 1px solid #CC0000; background: #FCF0EF url(../../img/error-bg.png) repeat-x top; color: #CC0000; margin-right: 5px;}
   .error-message{display:block; background:url(../../img/icon_error.png) no-repeat;margin:5px; padding-left:20px; }      
 

增加 jquery

$(document).ready(function () {
 $('.causeValidation').live('click',function () {
 $('.error-message').remove();
 var grp = $(this).parent().attr("class");
 $.each(Page_Validators, function () {
 if (this.validationGroup == grp || grp == "") {
 this.style.display = 'none';
 var $control = $('#' + this.controltovalidate);
 if (!this.isvalid) {
 $control.parent().addClass('validation-error');
 $control.parent().append('' + this.errormessage + '');
 $control.focus(function () {
 $('.error-message', $(this).parent()).remove();
 $(this).parent().removeClass('validation-error');
 });
 }
 }
 });
 });
});

觸發驗證的按鈕，將其CssClass設定為 "causeValidation'"

並用將按鈕包起來

<asp:Button ID="BTN_Next1" runat="server" Font-Size="Medium" Text="下一步" 
 ValidationGroup="V1" CssClass="causeValidation" />

這樣就大功告成囉！

回首頁