Change textbox's css class when ASP.NET Validation fails

Question

How can I execute some javascript when a Required Field Validator attached to a textbox fails client-side validation? What I am trying to do is change the css class of the textbox, to make the textbox's border show red.

I am using webforms and I do have the jquery library available to me.

Answer 1

I think you would want to use a Custom Validator and then use the ClientValidationFunction... Unless it helpfully adds a css class upon fail.

Answer 2

Here is quick and dirty thing (but it works!)

<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 3

Well if youir doing with the required field validators this will work if you want it to fire in the code behind.

if (!Page.IsValid)
{
   txb = SetErrorCss(txbFirstName, rfvName);
}

private static TextBox SetErrorCss(TextBox txtBox, RequiredFieldValidator rfv)
{
   if (!rfv.IsValid)
   {
      txtBox.CssClass = "error";
   }

   return txtBox;
}

Answer 4

Alternatively, just iterate through the page controls as follows: (needs a using System.Collections.Generic reference)

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", "");
    }
  }
}

Should work for most cases, and means you dont have to update it when you add validators. Ive added this code into a cstom Pageclass so it runs site wide on any page I have added validators to.