title: MVC4: On validation error, change the textbox color to red
body: <p>I have a form which has some text boxes, and when the textbox doesn't contain valid value I get the error message but the textbox color doesn't change to red.</p>
  
  <p>This is what I have</p>
  
  <p><strong>Model</strong></p>
  
  <pre><code>public class AddCompany
  {
      public int Id { get; set; }
  
      [Required(ErrorMessage = "*Name is required")]
      public string Name { get; set; }
  
      [Required(ErrorMessage = "*Address is required")]
      [RegularExpression(@"^\(?([0-9]{4})\)?([A-Z]{2})",ErrorMessage = "*Not a valid Zip Code, Must be in format 1234AB")]
      public string Address { get; set; }
  
      [Required(ErrorMessage = "*Phone Number is required")]
      [DataType(DataType.PhoneNumber)]
      [RegularExpression(@"^\(?([0-9]{10})", ErrorMessage = "*Not a valid number, must be 10 numbers")]
      public string Phone { get; set; }
  
      [DataType(DataType.DateTime)]
      public DateTime DateTimeAdded { get; set; }
      public string Comment { get; set; }
  
  }
  </code></pre>
  
  <p><strong>View</strong></p>
  
  <pre><code>@model CrmTestProject.Models.ViewModels.AddCompany
  
  @{
      ViewBag.Title = "AddCompany";
      Layout = "~/Views/shared/_BootstrapLayout.basic.cshtml";
  }
  &lt;script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"&gt;&lt;/script&gt;
  
  &lt;h2&gt;AddCompany&lt;/h2&gt;
  @Html.ValidationSummary(true)
  
  &lt;fieldset class="form-horizontal"&gt;
      &lt;legend&gt;New Company &lt;small&gt;Add&lt;/small&gt;&lt;/legend&gt;
      @using (Html.BeginForm("AddCompany", "Company"))
      {
          &lt;div class ="controls"&gt;
              &lt;label class="label"&gt;@Html.Label("Name")&lt;/label&gt;
              &lt;div class="input-block-label"&gt;@Html.EditorFor(model=&gt;model.Name)
                  @Html.ValidationMessageFor(model=&gt;model.Name)
              &lt;/div&gt;
              &lt;br/&gt;
              &lt;label class="label"&gt;@Html.Label("Address")&lt;/label&gt;
              &lt;div class="input-block-level"&gt;@Html.EditorFor(model=&gt;model.Address)
                  @Html.ValidationMessageFor(model=&gt;model.Address)
              &lt;/div&gt;
              &lt;br/&gt;
              &lt;label class="label"&gt;@Html.Label("Phone")&lt;/label&gt;
              &lt;div class="input-block-level"&gt;@Html.EditorFor(model=&gt;model.Phone)
                  @Html.ValidationMessageFor(model=&gt;model.Phone)
              &lt;/div&gt;
              &lt;br/&gt;
              &lt;div class="input-block-level"&gt;@Html.TextAreaFor(model=&gt;model.Comment)&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-actions" id="buttons"&gt;
              &lt;button type="submit" class="btn btn-primary" id="Submit"&gt;Save changes&lt;/button&gt;
              @Html.ActionLink("Cancel", "CompanyIndex", new { @class = "btn" })
          &lt;/div&gt;
      }
  &lt;/fieldset&gt;
  </code></pre>
  
  <p><strong>Browser ScreenShot</strong>
  <img src="https://i.stack.imgur.com/Qo5ZI.jpg" alt="enter image description here"></p>
  
  <p>As you can see I get the error message but I also want the textbox and preferably error message color to be red. I don't know if it is due to bootstrap.
  But when I check this <a href="http://weblogs.asp.net/imranbaloch/archive/2011/02/05/new-validation-attributes-in-asp-net-mvc-3-future.aspx" rel="nofollow noreferrer">blog for validation</a> things work perfectly here.
  Can anyone give me some suggestion?</p>