title: jquery validate not unhighlighting when radio button clicked
body: <p>I have a form with a radio button group which is inside a <strong>fieldset</strong> with a <strong>data-role=controlgroup</strong>. I am using the <strong>jQuery Mobile</strong> and jQuery Validate plugins to handle presentation and form validation. The problem I'm having is that the unhighlight method I have defined is not getting called after the sequence where submit button is clicked causing the validation to show errors, and then subsequently a radio button is clicked.</p>
  <p>My Validate setup is like this:</p>
  <pre><code>$(document).on(&quot;pageshow&quot;, &quot;#page&quot;, function() {
  
    $(&quot;.product_type_form&quot;).validate({
        validClass: &quot;data-valid&quot;, 
        errorClass: &quot;data_invalid&quot;,
        errorElement: &quot;span&quot;,                     
        errorPlacement: function(error, element) {
            if ($(element).is(&quot;input[type='radio']&quot;)) {
                container = $(element).parents('div.ui-controlgroup-controls');
            } else {
                container = $(element).parents('div.ui-input-text');
            }             
            error.insertBefore(container);
      },
      highlight: function(element, errorClass, validClass) {
          if ($(element).is(&quot;input[type='radio']&quot;)) {
              container = $(element).parents('div.ui-controlgroup-controls');    
          } else {
              container = $(element).parents('div.ui-input-text');
          }
          container.addClass(errorClass);
          container.removeClass(validClass);
      },
      unhighlight: function (element, errorClass, validClass) {
          if ($(element).is(&quot;input[type='radio']&quot;)) {
              container = $(element).parents('div.ui-controlgroup-controls');    
          } else {
              container = $(element).parents('div.ui-input-text');
          }            
          container.addClass(validClass);
          container.removeClass(errorClass);            
      }         
    });    
  });
  </code></pre>
  <p>I looked at the jQuery plugin docs for Validate and noticed this:</p>
  <blockquote>
  <p>onclick</p>
  <p>Type: Boolean or Function()</p>
  <p>Validate checkboxes and radio buttons on click. Set to false to disable.</p>
  </blockquote>
  <p>I understood this to mean that the default for it was true (it is enabled), so why does my highlight method not get called for the radio button onclick events?</p>
  <p>The page can be seen <a href="https://www.dealdirectfinancial.co.uk/index.php?option=com_diymobile&task=TestForm1.showForm" rel="nofollow noreferrer" title="view problem page">here</a>.</p>
  <p>Tried to set up a Fiddle for it <a href="http://jsfiddle.net/nickweavers/QxLMC/" rel="nofollow noreferrer">here</a> but couldn't make it work :(</p>
  <p>TIA</p>