title: How to incorporate Bootstrap has-error class on error while using data annotations
body: <p>How do I add Bootstrap's <code>has-error</code> css class to a container div on a form error while using data annotations?</p>
  
  <p>I have the following property in my viewmodel class:</p>
  
  <pre><code>[Display(Name = "First Name")]
  [Required(ErrorMessage = "Required")]
  public string FirstName { get; set; }
  </code></pre>
  
  <p>First name is a required field.  When the user clicks the submit button and nothing has been filled in then the Required error message is displayed beneath the textbox.  The textbox's border is displayed in a reddish colour.  Here is my css:</p>
  
  <pre><code>.field-validation-error
  {
       color: #b94a48;
  }
  
  input.input-validation-error
  {
       border: 1px solid #b94a48;
  }
  </code></pre>
  
  <p>Here is my Razor and HTML markup:</p>
  
  <pre><code>&lt;div class="form-group"&gt;
       @Html.LabelFor(m =&gt; m.FirstName, new { @class = "col-lg-2 control-label" })
       &lt;div class="col-lg-4"&gt;
            @Html.TextBoxFor(m =&gt; m.FirstName, new { @class = "form-control", placeholder = "Enter first name" })
            @Html.ValidationMessageFor(m =&gt; m.FirstName)
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I am trying to achieve is that when there is an error, for example like what I explained above then I need the HTML markup to look something like this:</p>
  
  <pre><code>&lt;div class="form-group has-error"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How would I achieve something like this?</p>
  
  <p>I am using <code>ASP.NET MVC 5</code> and the latest version of <code>Bootstrap</code>.</p>