title: Input validation message not disappearing
body: <p>I've got a form that validate input fields, both textboxes and radio buttons. When trying to submit the form and the fields have not been completed, the validation error messages displays correctly. When a field has the the required data it needs the validation error should disappear immediately. The validation messages disappears on the textboxes when the user types. However, when selecting an option on the radio button the validaton message (or the background colour of that field) does not dissapear. </p>
  
  <p>This is what it looks like before selecting:</p>
  
  <p><a href="https://i.stack.imgur.com/d8bys.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/d8bys.png" alt="enter image description here"></a></p>
  
  <p>And this is after a selection was made:</p>
  
  <p><a href="https://i.stack.imgur.com/oturt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oturt.png" alt="enter image description here"></a></p>
  
  <p>My code:</p>
  
  <pre><code>    &lt;div class="form-group"&gt;
          &lt;label class="col-lg-12 control-label label-input"&gt;
              Is this also your residence address?
              &lt;a tabindex="-1" data-toggle="popover" data-placement="bottom" class="popover-dismiss" rel="popover" data-content="We may need to send some policy and claim documents to you via mail."&gt;
                  &lt;img src="~/Images/svg/Icon Info.svg" height="16" width="16" /&gt;
              &lt;/a&gt;
          &lt;/label&gt;
          @*@Html.LabelFor(m =&gt; m.Address.RiskIsResidence, new {@class = "col-lg-12 control-label label-input"})*@
          &lt;div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"&gt;
              &lt;div data-toggle="buttons"&gt;
                  &lt;label class="btn btn-radio"&gt;
                      @Html.RadioButtonFor(m =&gt; m.Address.RiskIsResidence, "Yes", new { name = "radIsResidence" }) Yes
                  &lt;/label&gt;
  
                  &lt;label class="btn btn-radio"&gt;
                      @Html.RadioButtonFor(m =&gt; m.Address.RiskIsResidence, "No", new { name = "radIsResidence" }) No
                  &lt;/label&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          @Html.ValidationMessageFor(m =&gt; m.Address.RiskIsResidence, null, new { @class = "col-lg-12" })
      &lt;/div&gt;
  </code></pre>
  
  <p>My CSS for the validation:</p>
  
  <pre><code>    .field-validation-error, .validation-summary-errors,
       label.error {
       color: #fff;
       background-color:#ef425e;
       font-size: 12px;
       font-family: "Open Sans";
       font-style: normal;
       font-stretch: normal;
       line-height: normal;
       letter-spacing: normal;
       padding:8px 10px;
       margin:3px 0;
       width:100%;
       display:inline-block;
       }
  
       .input-validation-error, input-validation-errors,
       input.error {
       border: 2px solid #ef425e;
       padding:7px;
       }
  
      .input-validation-error:focus {
       border: 1px solid #ef425e;
       background-color: #FFFFFF;
       padding:7px;
       /*box-shadow: inset 0 -3px 0 0 red;*/
       }
  </code></pre>
  
  <p>How would I remove the colour or make it disappear when selecting a radio button? Preferably I would like to do this in css as this is across all page.  </p>
  
  <hr>
  
  <h2>UPDATE</h2>
  
  <p>The validation used are jquery-validate, this is included in the bundle config which handles the validation (Enitity framework used thus required set in model). </p>
  
  <p>The custom javascript that was used to remove the html error message in the validation control was removed as below, however I found that removing the class is not working, thus the red strip is still displaying.</p>
  
  <pre><code>    $('input[type=radio]').on("change", function (e) {
      //$(this).trigger('reset.unobtrusiveValidation');
      $(this).closest('div.form-group').find(".field-validation-error").html("");
      $(this).closest('div.form-group').find(".field-validation-error").remove();
  
  });
  </code></pre>
  
  <p>How do I remove a class through JS?</p>