ASP.NETvalidation失败时更改文本框的css类

当附加到文本框的必填字段validation器未通过客户端validation时,如何执行某些javascript? 我想要做的是更改文本框的css类,使文本框的边框显示为红色。

我正在使用webforms,我确实可以使用jquery库。

这是快速和肮脏的事情(但它的工作!)

您可以使用以下脚本:

  

此代码修饰原始的ValidatorUpdateDisplay函数,该函数负责更新validation程序的显示,并根据需要更新控件validation。

希望这可以帮助,

我想你会想要使用自定义validation器 ,然后使用ClientValidationFunction ……除非它在失败时有助于添加一个css类。

前段时间我花了几个小时,从那以后我一直在使用一些自定义的js魔法来实现这一目标。

事实上,ASP.NETvalidation的工作方式非常简单。 基本思想是添加一个css类,在每个需要快速视觉反馈的控件上附加一个javascript事件。

  

例如,这将是在ASP.Net文本框控件上添加的代码。 是的,您可以根据需要添加任意数量,它只会意味着添加CssClass值。

  

它的作用是在工作控件发生变化时触发ASP.Net客户端validation,如果无效则应用css类。 因此,要自定义可视化,您可以依赖于CSS。

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

它并不完美,但差不多:)而且至少你的代码不会受到额外的影响 。 最好的,适用于所有类型的Asp.Netvalidation器,事件定制的。

我没有看到像这样的谷歌搜索,所以我不想与你分享我的伎俩。 希望能帮助到你。

服务器端的额外内容

经过一段时间使用这个后,我还要从代码中添加这个“.novalid”css类,当需要对事物进行特定validation时,可能只能在服务器端以这种方式检查:

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

这是我的解决方案。

优于其他解决方案的优势:

  • 与ASP.NET无缝集成 – 无需更改代码。 只需在母版页中调用页面加载方法即可。
  • 文本框或控件更改时自动更改CSS类

缺点:

  • 使用ASP.NET JavaScript代码的一些内部function
  • 仅在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"); } } }); } } } } 

或者,只需按如下方式遍历页面控件:(需要使用System.Collections.Generic引用)

 const string CSSCLASS = " error"; protected static Control FindControlIterative(Control root, string id) { Control ctl = root; LinkedList ctls = new LinkedList(); 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", ""); } } } 

应该适用于大多数情况,并且意味着您在添加validation器时无需更新它。 我已将此代码添加到cstom Pageclass中,因此它在我添加validation器的任何页面上都在站点范围内运行。