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。

希望这会有所帮助，