title: Remove error message of a particular field using jquery validate
body: <p>I have a simple form that looks like below. I have clicked the Submit button once and all the jquery validation messages appear (as shown in red). However, upon unchecking the Call checkbox for Sports Event, I would like to remove all jquery validate messages associated to the Sports Event only. How can I do that? Currently, if I check the Call checkbox again, the validation messages are still shown. <br><br> </p>
  
  <p>Please see the codes below: <br></p>
  
  <pre><code> //if call checkbox is checked, display the phoneNo and attendeesNo field
      function toggleCall(){
          if (document.getElementById("callCheckbox").checked == true) {
              document.getElementById('phoneNo').style.display = "";
              document.getElementById('attendeesNo').style.display = "";
          } else {
              document.getElementById('phoneNo').style.display = "none";
              document.getElementById('attendeesNo').style.display = "none";
          }
      }
  </code></pre>
  
  <p>HTML Code: <br></p>
  
  <pre><code>&lt;tr&gt;
      &lt;td&gt;
          &lt;input type="checkbox" name="callCheckbox" id="callCheckbox" value="true" onclick="toggleCall()" /&gt;
      &lt;/td&gt;
      &lt;td&gt;
          &lt;input type="checkbox" name="emailCheckbox" id="emailCheckbox" value="true" onclick="toggleEmail()" /&gt;
      &lt;/td&gt;
      &lt;td&gt; Sports Event 
          &lt;br&gt;
          &lt;div id="sportsEvent" style="display:none;"&gt;
              &lt;label&gt; Enter a phone number: &lt;/label&gt;
              &lt;input type="text" name="phoneNo" id="phoneNo"&gt;
              &lt;br&gt;
              &lt;label&gt; No. of attendees: &lt;/label&gt;
              &lt;input type="text" name="attendeesNo" id="attendeesNo"&gt;
          &lt;/div&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p><br> jquery validation method</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      //jquery validation Script
      var _global_validator = null;
  
      $(document).ready(
          function() {
              $("#submitForm").validate( {
                  rules: {
                      phoneNo: {
                          required: function (element) {
                                  if($("#callCheckbox").is(':checked')){
                                          var e = document.getElementById("phoneNo");
                                          if(e.value==""){
                                              return true;  
                                          }
                                          else{
                                              return false;
                                          } 
                                  }
                                  else{
                                      return false;
                                  }    
                              } 
                        },
                        attendeesNo: {
                          required: function (element) {
                                  if($("#callCheckbox").is(':checked')){
                                      var e = document.getElementById("attendeesNo");
                                      if(e.value==""){
                                          return true;  
                                      }
                                      else{
                                          return false;
                                      } 
                                  }
                                  else {
                                      return false;
                                  }  
                          } 
                        },
  
                      errorElement : "small",
  
                      invalidHandler : function(e, validator) {
                          _global_validator = validator;
                          //renderDropdownUIValidation(validator);
                          renderCheckableUIValidation(validator);
                      },
  
                      errorPlacement : function(error, element) {
                          error.insertAfter(element);
                      },
  
                      messages : {
                          phoneNo: {
                                  required: '&lt;Please enter phone number&gt;',
                          },
                          attendeesNo: {
                                  required: '&lt;Please enter no. of attendees&gt;',
                          },
                      },
  
                      submitHandler: function(form) {
                              form.submit();
                      }
                  }
  
              }); //end validate
          });
  
      &lt;/script&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/e10L7.png" alt="form"></p>