How do I add an additional CSS class on a surrounding DIV for failed form validation?

Question

Here's my scenario:

  <!-- Normal Control -->
  <div class="required">
    <label for="address1">Address line 1</label>
    <input type="text id="address1" name="address1" class="inputText" />
  </div>

  <!-- Same Control - but with a validation error -->
  <div class="required error">
    <p class="error">Address Line 1 Field is required</p>
    <label for="address1">Address line 1</label>
    <input type="text id="address1" name="address1" class="inputText" />
  </div>

In the "validation error" html area, I'm able to show the message using code like this:

  <div class="required">
    <asp:RequiredFieldValidator id="address1_validate" runat="server" ControlToValidate="address1" Text='<p class="error">Address Line 1 Field is required</p>' />
    <label for="address1">Address (line 1)</label>
    <asp:TextBox id="address1" CssClass="inputText" CausesValidation="true" runat="server"/>
  </div>

What I'm not able to do is add the additional class to the surrounding div tag. I was thinking that I could do something like:

  <div class="required <%= !address1_validate.isValid ? "error" : "" %>">

That pretty much doesn't work.

Anyway, I don't want to have to rely on JavaScript to set these values - it needs to work like "Web 1.0".

Any ideas?

Thanks, Jon

------- My Solution------- Here's the code behind that worked for me:

  protected void Page_Load(object sender, EventArgs e)
  {
    if (this.IsPostBack)
    {
      address1_validate.Validate();
      if (!address1_validate.IsValid)
      {
        address_panel.CssClass = "required error";
      }
    }
  }

And the front-end:

  <asp:Panel runat="server" id="address_panel" CssClass="required">
    <asp:RequiredFieldValidator id="address1_validate" runat="server" ControlToValidate="address1" Text='<p class="error">Address Field is required</p>' />
    <label for="address1">Address (line 1)</label>
    <asp:TextBox id="address1" CssClass="inputText" CausesValidation="true" EnableViewState="true" runat="server"  />
  </asp:Panel>

Thanks for the help!

Make sure to set EnableClientScript="False" on the RequiredFieldValidator, so that you ensure that the postback occurs. Otherwise it will validate through JavaScript if it can, and your server-side code to set the CSS class will never run. — bdukes, May 15 '09 at 16:50

sandesh247 · Accepted Answer · 2009-05-15T17:06:16.833

2

You could replace the div with an ASP panel, runat=server of course.

<asp:Panel runat="server" ID="Panel1">
    <label for="address1">Address line 1</label>
    <input type="text id="address1" name="address1" class="inputText" />
</asp:Panel>

In the codebehind, you can then do -

address1_validate.Validate();
...
...
if(address1_validate.IsValid)
     Panel1.CssClass = "required";
else
     Panel1.CssClass = "required error";

edited May 15 '09 at 17:06

answered May 15 '09 at 16:48

sandesh247

1,658
1
18
24

Doesn't the RequiredFieldValidator execute via JavaScript? – Chris Brandsma May 15 '09 at 16:52
You can execute it in the codebehind too. Calling the `address1_validate.Validate()' function updates the IsValid property. – sandesh247 May 15 '09 at 17:05

score 1 · Answer 2 · answered May 15 '09 at 16:36

1

Could just put an ID on it and runat="server" and change it in the code behind.

answered May 15 '09 at 16:36

CSharpAtl

7,374
8
39
53

score 0 · Answer 3 · answered Feb 10 '14 at 03:17

Just thought I'd add to this, if you hook OnPreRender for the RequiredFieldValidator or CustomValidator and add the class to the element/control being validated, you can do it as so:

protected void uxValidator_PreRender(object sender, EventArgs e)
    {
        RequiredFieldValidator uxValidator = sender as RequiredFieldValidator;
        bool isValid = true;
        WebControl control = null;
        if (uxValidator != null)
        {
            isValid = uxValidator.IsValid;
            control = uxValidator.NamingContainer.FindControl(uxValidator.ControlToValidate) as WebControl;
        }
        else
        {
            CustomValidator uxCustomValidator = sender as CustomValidator;
            if (uxCustomValidator != null)
            {
                isValid = uxCustomValidator.IsValid;
                control = uxCustomValidator.NamingContainer.FindControl(uxCustomValidator.ControlToValidate) as WebControl;
            }
        }
        if (control != null)
        {
            if (!isValid)
            {
                control.Attributes["class"] = "error";
            }
            else
            {
                if ((control as TextBox) != null && !string.IsNullOrEmpty((control as TextBox).Text))
                {
                    control.Attributes["class"] = "";
                }
            }
        }
    }

score 0 · Answer 4 · answered May 15 '09 at 16:37

First, add runat=server and an id to the outer div.

From here you have a couple of options. You can override the validate method on the page and change the class settings on that div.

Or, you can create a custom validator that inherits from requiredfieldvalidator. Add a property to hold the div id and within the validation code inject your class as necessary.

How do I add an additional CSS class on a surrounding DIV for failed form validation?

4 Answers4

Linked