ASP.NET驗證失敗時更改文本框的CSS類

Question

當附加到文本框的必需字段驗證程序未通過客戶端驗證時，如何執行一些JavaScript？我想要做的是更改文本框的CSS類，以使文本框的邊框顯示爲紅色。

我正在使用webforms，我有jquery庫可供我使用。

Answer 1

這裏是快速和骯髒的東西（但它的作品！）

<form id="form1" runat="server"> 
     <asp:TextBox ID="txtOne" runat="server" /> 
     <asp:RequiredFieldValidator ID="rfv" runat="server" 
           ControlToValidate="txtOne" Text="SomeText 1" /> 
     <asp:TextBox ID="txtTwo" runat="server" /> 
     <asp:RequiredFieldValidator ID="rfv2" runat="server" 
           ControlToValidate="txtTwo" Text="SomeText 2" /> 
     <asp:Button ID="btnOne" runat="server" OnClientClick="return BtnClick();" 
             Text="Click" CausesValidation="true" /> 
    </form> 
    <script type="text/javascript"> 
     function BtnClick() { 
      //var v1 = "#<%= rfv.ClientID %>"; 
      //var v2 = "#<%= rfv2.ClientID %>"; 
      var val = Page_ClientValidate(); 
      if (!val) { 
       var i = 0; 
       for (; i < Page_Validators.length; i++) { 
        if (!Page_Validators[i].isvalid) { 
         $("#" + Page_Validators[i].controltovalidate) 
         .css("background-color", "red"); 
        } 
       } 
      }    
      return val; 
     } 
    </script> 

Answer 2

我想你會想使用Custom Validator，然後使用ClientValidationFunction ...除非它有助於在失敗時添加一個css類。

Answer 3

或者，只是通過頁面控件迭代如下：（需要使用System.Collections.Generic引用）

const string CSSCLASS = " error";  

protected static Control FindControlIterative(Control root, string id) 
{ 
    Control ctl = root; 
    LinkedList<Control> ctls = new LinkedList<Control>(); 
    while (ctl != null) 
    { 
    if (ctl.ID == id) return ctl; 
    foreach (Control child in ctl.Controls) 
    { 
     if (child.ID == id) return child; 
     if (child.HasControls()) ctls.AddLast(child); 
    } 
    ctl = ctls.First.Value; 
    ctls.Remove(ctl); 
    } 
    return null; 
} 



protected void Page_PreRender(object sender, EventArgs e) 
{ 
    //Add css classes to invalid items 
    if (Page.IsPostBack && !Page.IsValid) 
    { 
    foreach (BaseValidator item in Page.Validators) 
    { 
     var ctrltoVal = (WebControl)FindControlIterative(Page.Form, item.ControlToValidate); 
     if (!item.IsValid) ctrltoVal.CssClass += " N"; 
     else ctrltoVal.CssClass.Replace(" N", ""); 
    } 
    } 
} 

應該適用於大多數情況，並且意味着您添加驗證程序時不必更新它。我將這段代碼添加到了一個cstom Pageclass中，因此它在我添加了驗證器的任何頁面上運行站點範圍。

Answer 4

前段時間我花了幾個小時，從那以後我一直在使用一些自定義的js魔術來實現這一點。

實際上很簡單，並且以ASP.NET驗證的方式工作。基本的想法是添加一個CSS類來在每個控件上附加一個javascript事件，以便快速獲得視覺反饋。

<script type="text/javascript" language="javascript"> 
    /* Color ASP NET validation */ 
    function validateColor(obj) { 
     var valid = obj.Validators; 
     var isValid = true; 

     for (i in valid) 
       if (!valid[i].isvalid) 
        isValid = false; 

     if (!isValid) 
      $(obj).addClass('novalid', 1000); 
     else 
      $(obj).removeClass('novalid', 1000); 
    } 

    $(document).ready(function() { 
     $(".validateColor").change(function() {validateColor(this);}); 
    }); 
</script> 

例如，這將是在ASP.Net文本框控件上添加的代碼。是的，你可以放置儘可能多的，它只會意味着添加一個CssClass值。

<asp:TextBox ID="txtBxEmail" runat="server" CssClass="validateColor" /> 

它是什麼觸發ASP.Net客戶端驗證時，有關於工作控制權的變更和應用CSS類，如果它是無效的。所以要定製可視化，你可以依靠css。

.novalid { 
    border: 2px solid #D00000; 
} 

它並不完美，但幾乎:)和至少你的代碼將不會從多餘的東西受到影響。最好的，可以與各種Asp.Net驗證器，事件自定義器一起使用。

我還沒有看到類似這個谷歌搜索的東西，所以我不想與你分享我的詭計。希望能幫助到你。

在服務器端額外的東西：

使用此我也從代碼中添加此「.novalid」 CSS類時需要的東西一些特定的驗證，也許可以在服務器端只檢查後面一段時間後這樣：

Page.Validate(); 
    if (!requiredFecha.IsValid || !CustomValidateFecha.IsValid) 
     txtFecha.CssClass = "validateColor novalid"; 
    else 
     txtFecha.CssClass = "validateColor"; 

Answer 5

這是我的解決方案。

優於其他解決方案：

• 與ASP.NET無縫集成 - 需要的代碼沒有變化。只需在主頁面上加載頁面時調用該方法。
• 自動更改CSS類時，文本框或控制改變

缺點：

• 僅使用在ASP.NET 4.0
測試的ASP.NET JavaScript代碼的一些內部特徵

如何使用：

• 需要的JQuery
• 調用 「Validation_Load」 功能，在頁面加載時

• 申報了 「control_validation_error」 CSS類

  function Validation_Load() { 
  if (typeof (Page_Validators) != "object") { 
      return; 
  } 
  
  for (var i = 0; i < Page_Validators.length; i++) { 
      var val = Page_Validators[i]; 
      var control = $("#" + val.controltovalidate); 
      if (control.length > 0) { 
       var tagName = control[0].tagName; 
       if (tagName != "INPUT" && tagName != "TEXTAREA" && tagName != "SELECT") { 
        // Validate sub controls 
       } 
       else { 
        // Validate the control 
        control.change(function() { 
         var validators = this.Validators; 
         if (typeof (validators) == "object") { 
          var isvalid = true; 
          for (var k = 0; k < validators.length; k++) { 
           var val = validators[k]; 
           if (val.isvalid != true) { 
            isvalid = false; 
            break; 
           } 
          } 
          if (isvalid == true) { 
           // Clear the error 
           $(this).removeClass("control_validation_error"); 
          } 
          else { 
           // Show the error 
           $(this).addClass("control_validation_error"); 
          } 
         } 
        }); 
       } 
      } 
  } 
  } 
  

Answer 6

你可以使用下面的腳本：

<script> 

    $(function(){ 
     if (typeof ValidatorUpdateDisplay != 'undefined') { 
      var originalValidatorUpdateDisplay = ValidatorUpdateDisplay; 

      ValidatorUpdateDisplay = function (val) { 
       if (!val.isvalid) { 
        $("#" + val.controltovalidate).css("border", "2px solid red"); 
       } 

       originalValidatorUpdateDisplay(val); 
      } 
     } 
    }); 

</script> 

此代碼裝飾原始的ValidatorUpdateDisplay函數respon sible更新驗證器的顯示，並根據需要更新controltovalidate。

希望這會有所幫助，