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

您可以使用以下脚本：

<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函数，该函数负责更新验证器的显示，并根据需要更新控件验证。

希望这有帮助，

Answer 3

我想你会想要使用Custom Validator然后使用ClientValidationFunction ...除非它在失败时有助于添加一个css类。

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 JavaScript代码的一些内部功能
仅在ASP.NET 4.0上测试

如何使用：

需要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

或者，只需遍历页面控件，如下所示:(需要使用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中，因此它在我添加验证器的任何页面上都在站点范围内运行。

ASP.NET验证失败时更改文本框的css类

6 个答案: