title: .Net MVC Cannot remove Validation message using jQuery
body: <p>I have simple form a dropdown list and a textbox. When the page is loaded textbox is disabled. If 'Other' is selected from dropdown list, then textbox is enabled and I add 'required' rule to textbox as I don't want user to enter something in the text box. When 'Other' is selected and if Create button is clicked, I can see validation error message but I cannot remove that message after user has typed something in the empty textbox. Here is how it looks:</p>
  
  <p><a href="https://i.stack.imgur.com/pmcqF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pmcqF.jpg" alt="enter image description here"></a></p>
  
  <p>Here is my model:</p>
  
  <pre><code>using System.ComponentModel.DataAnnotations;
  
  namespace validatetextbox.Models
  {
      public class Manager
      {
          public int Id { get; set; }
          [Required]
          public string City { get; set; }
          [Display(Name = "Other City")]
          [DisplayFormat(ConvertEmptyStringToNull = false)]
          public string OtherCity { get; set; }
      }
  }
  </code></pre>
  
  <p>My Controller method is</p>
  
  <pre><code>// GET: Managers/Create
  public ActionResult Create()
  {
      //populate Gender dropdown
      List&lt;SelectListItem&gt; c = new List&lt;SelectListItem&gt;();
      c.Add(new SelectListItem { Text = "-- Please Select --", Value = "" });
      c.Add(new SelectListItem { Text = "New York", Value = "New York" });
      c.Add(new SelectListItem { Text = "Miami", Value = "Miami" });
      c.Add(new SelectListItem { Text = "Other", Value = "Other" });
  
      ViewBag.Cities = c;
      return View();
  }
  </code></pre>
  
  <p>My view is as follows:</p>
  
  <pre><code>@model validatetextbox.Models.Manager
  
  @{
     ViewBag.Title = "Create";
   }
  
  &lt;h2&gt;Create&lt;/h2&gt;
  
  
  @using (Html.BeginForm()) 
  {
      @Html.AntiForgeryToken()
  
      &lt;div class="form-horizontal"&gt;
          &lt;h4&gt;Manager&lt;/h4&gt;
          &lt;hr /&gt;
          @Html.ValidationSummary(true, "", new { @class = "text-danger" })
          &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.City, htmlAttributes: new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10"&gt;
                  @Html.DropDownListFor(model =&gt; model.City, ViewBag.Cities as List&lt;SelectListItem&gt;, new { @class = "form-control" })
                  @Html.ValidationMessageFor(model =&gt; model.City, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.OtherCity, htmlAttributes: new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10"&gt;
                  @Html.EditorFor(model =&gt; model.OtherCity, new { htmlAttributes = new { @class = "form-control" } })
                  @Html.ValidationMessageFor(model =&gt; model.OtherCity, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;div class="col-md-offset-2 col-md-10"&gt;
                  &lt;input type="submit" value="Create" class="btn btn-default" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  }
  
  &lt;div&gt;
  @Html.ActionLink("Back to List", "Index")
  &lt;/div&gt;
  
  @section Scripts {
  @Scripts.Render("~/bundles/jqueryval")
  
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $('#OtherCity').prop('disabled', true);
          $('#City').change(function () {
              if ($('#City option:selected').text() != 'Other') {
                  $("#OtherCity").rules("remove", "required");
                  $('#OtherCity').prop('disabled', true);
              } else {
                  $('#OtherCity').prop('disabled', false)
                  $("#OtherCity").rules("add", "required");
              }
          });
  });
  &lt;/script&gt;
  
  }
  </code></pre>