Databases
StackOverflow2013
Postsdbo
POHow do I add an additional CSS class on a surrounding DIV for failed form validation?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I add an additional CSS class on a surrounding DIV for failed form validation?
    text
    copied!<p>Here's my scenario:</p> <pre><code> &lt;!-- Normal Control --&gt; &lt;div class="required"&gt; &lt;label for="address1"&gt;Address line 1&lt;/label&gt; &lt;input type="text id="address1" name="address1" class="inputText" /&gt; &lt;/div&gt; &lt;!-- Same Control - but with a validation error --&gt; &lt;div class="required error"&gt; &lt;p class="error"&gt;Address Line 1 Field is required&lt;/p&gt; &lt;label for="address1"&gt;Address line 1&lt;/label&gt; &lt;input type="text id="address1" name="address1" class="inputText" /&gt; &lt;/div&gt; </code></pre> <p>In the "validation error" html area, I'm able to show the message using code like this:</p> <pre><code> &lt;div class="required"&gt; &lt;asp:RequiredFieldValidator id="address1_validate" runat="server" ControlToValidate="address1" Text='&lt;p class="error"&gt;Address Line 1 Field is required&lt;/p&gt;' /&gt; &lt;label for="address1"&gt;Address (line 1)&lt;/label&gt; &lt;asp:TextBox id="address1" CssClass="inputText" CausesValidation="true" runat="server"/&gt; &lt;/div&gt; </code></pre> <p>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:</p> <pre><code> &lt;div class="required &lt;%= !address1_validate.isValid ? "error" : "" %&gt;"&gt; </code></pre> <p>That pretty much doesn't work.</p> <p>Anyway, I don't want to have to rely on JavaScript to set these values - it needs to work like "Web 1.0".</p> <p>Any ideas?</p> <p>Thanks, Jon</p> <p>------- My Solution------- Here's the code behind that worked for me:</p> <pre><code> protected void Page_Load(object sender, EventArgs e) { if (this.IsPostBack) { address1_validate.Validate(); if (!address1_validate.IsValid) { address_panel.CssClass = "required error"; } } } </code></pre> <p>And the front-end:</p> <pre><code> &lt;asp:Panel runat="server" id="address_panel" CssClass="required"&gt; &lt;asp:RequiredFieldValidator id="address1_validate" runat="server" ControlToValidate="address1" Text='&lt;p class="error"&gt;Address Field is required&lt;/p&gt;' /&gt; &lt;label for="address1"&gt;Address (line 1)&lt;/label&gt; &lt;asp:TextBox id="address1" CssClass="inputText" CausesValidation="true" EnableViewState="true" runat="server" /&gt; &lt;/asp:Panel&gt; </code></pre> <p>Thanks for the help!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload