title: Clear jquery.validate error messages on change/hide of disabled attributes
body: <p>Trying to clear the error messages when the disabled fields are toggled on and off on my form using jquery.validate. Right now I have it working where on change or on click fields are showing and changing the prop from disabled. So it works for what I need which is hiding the fields that are not necessary and not validating them when they are in a disabled state. However, when I toggle these fields back to their disabled state ad hide them, the error messages are still showing until I click submit again. I tried adding the .valid() call to the toggleDisabled function and it does not make the messages disappear when they go back to a hidden/disabled state. Anyone see what can be added to make the messages disappear when the fields do?</p>
  
  <p>Here is the working fiddle with what I have so far:
  <a href="http://jsfiddle.net/Dn8JX/2/" rel="nofollow">JS Fiddle</a></p>
  
  <p>And I am using jquery.validate from :</p>
  
  <p><a href="http://jqueryvalidation.org/" rel="nofollow">jQuery.Validate</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form id="myform"&gt;
  &lt;input type="text" name="field1" /&gt;
  &lt;br/&gt;
  &lt;br /&gt;
  &lt;input type="text" id="toggleInput" name="toggleInputName" disabled style="display:none" /&gt;
  &lt;input type="button" id="toggleButton" value="Toggle Disabled" /&gt;
  
  &lt;div id="tickets"&gt;
      &lt;label for="group1"&gt;Number of Tickets: &lt;span class="req"&gt;*&lt;/span&gt;&lt;/label&gt;
      &lt;select class="group1_dropdown" id="group1" name="group1"&gt;
          &lt;option value="0"&gt;-- Please select --&lt;/option&gt;
          &lt;option value="1"&gt;Member&lt;/option&gt;
          &lt;option value="2"&gt;Member + 1 Guest&lt;/option&gt;
          &lt;option value="3"&gt;Member + 2 Guests&lt;/option&gt;
          &lt;option value="4"&gt;Member + 3 Guests&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  &lt;input type="text" id="payMethod" name="payMethodName" disabled style="display:none" /&gt;
  &lt;input type="submit" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(document).ready(function () {
      $('#myform').validate({
          onblur: true,
          onkeyup: false,
          ignore: ":disabled",
          rules: {
              field1: {
                  required: true,
                  minlength: 5
              },
              payMethodName: {
                  required: true,
                  minlength: 5
              },
              toggleInputName: {
                  required: true,
                  minlength: 5
              }
          },
          submitHandler: function (form) { // for demo
              alert('valid form');
              return false;
          }
      });
  });
  //used for toggling/showing disabled fields - will display and make not disabled on same click event
  (function ($) {
      $.fn.toggleDisabled = function () {
          return this.each(function () {
              var $this = $(this);
              if ($this.prop('disabled')) {
                  $this.prop('disabled', false).show();
              } else {
                  $this.prop('disabled', true).hide();
              }
          });
      };
  })(jQuery);
    $(function () {
      $('#toggleButton').click(function () {
          $('#toggleInput').toggleDisabled();
      });
  });
  $(function () {
  $("#group1").change(function () {
      var str = "";
      str = parseInt($(this).val());
      if(str == 2)
          $("#payMethod").toggleDisabled();
      else
          $("#payMethod").toggleDisabled();
  });
  
  });
  </code></pre>