title: ASP.NET MVC 2 Validation Error Styles
body: <p>I'm having trouble with my ASP.NET MVC 2 form validation and setting my style. </p>
  
  <p>Here is an example of my form, with a validation error:</p>
  
  <p><img src="https://i.stack.imgur.com/mn1Qt.png" alt="alt text"></p>
  
  <p>The field uses the following html:</p>
  
  <pre><code>&lt;div class="registration-field"&gt;
       &lt;label&gt;FullName&lt;/label&gt;&lt;%= Html.TextBoxFor(x =&gt; x.FullName) %&gt;
       &lt;%= Html.ValidationMessageFor(x =&gt; x.FullName)%&gt;
  &lt;/div&gt;    
  </code></pre>
  
  <p>The problem is, to show the highlight across the entire element, I need to add the CSS class "registration-field-error" to the first div. </p>
  
  <pre><code>&lt;div class="registration-field registration-field-error"&gt;
       &lt;label&gt;FullName&lt;/label&gt;&lt;%= Html.TextBoxFor(x =&gt; x.FullName) %&gt;
       &lt;%= Html.ValidationMessageFor(x =&gt; x.FullName)%&gt;
  &lt;/div&gt;    
  </code></pre>
  
  <p>The CSS for registration-field-error is:</p>
  
  <pre><code>.registration-field-error
  {
      background-image:url(../Content/Images/box-background-error.png);
      background-repeat:repeat-y; 
  }
  </code></pre>
  
  <p>I can do some complicated logic to check the ViewState for errors, which works fine for server validation errors, but not for client-side validation:</p>
  
  <pre><code>&lt;% if (ViewData.ModelState["FullName"] == null) { %&gt;
       &lt;div class="registration-field"&gt;
  &lt;% }  else { %&gt;
       &lt;div class="registration-field registration-field-error"&gt;
  &lt;% } %&gt;
  </code></pre>
  
  <p>My first thought was to make a new Html helper to decide if it should use the registration-field-error class:</p>
  
  <pre><code>&lt;%= Html.FormFieldFor(x =&gt; x.FullName, ViewData.ModelState) %&gt; 
  </code></pre>
  
  <p>And then editing the MicrosoftMvc.Ajax.js script to add the class when it detects clientside validation errors. </p>
  
  <p>Or, is there a better way to accomplish this? </p>