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器的任何页面上都在站点范围内运行。