jquery validate not unhighlighting when radio button clicked

Question

I have a form with a radio button group which is inside a fieldset with a data-role=controlgroup. I am using the jQuery Mobile 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.

My Validate setup is like this:

$(document).on("pageshow", "#page", function() {

  $(".product_type_form").validate({
      validClass: "data-valid", 
      errorClass: "data_invalid",
      errorElement: "span",                     
      errorPlacement: function(error, element) {
          if ($(element).is("input[type='radio']")) {
              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("input[type='radio']")) {
            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("input[type='radio']")) {
            container = $(element).parents('div.ui-controlgroup-controls');    
        } else {
            container = $(element).parents('div.ui-input-text');
        }            
        container.addClass(validClass);
        container.removeClass(errorClass);            
    }         
  });    
});

I looked at the jQuery plugin docs for Validate and noticed this:

onclick

Type: Boolean or Function()

Validate checkboxes and radio buttons on click. Set to false to disable.

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?

The page can be seen here.

Tried to set up a Fiddle for it here but couldn't make it work :(

TIA

Answer 1

For some reason, only when you use jQuery Mobile, the click event of the radio is ignored by the jQuery Validate plugin.

Here is a workaround that programatically triggers a validation test when a radio button is clicked...

$('input[name="product_type"]').on('click', function() {
    $(this).valid();  // triggers a validation test
});

Your demo modified: http://jsfiddle.net/QxLMC/18/

Answer 2

When manipulating checkboxes/radio buttons via javascript , 'refresh' method needs to be called so as to affect the style. sample below :

$("input[type='radio']").attr("checked",true).checkboxradio("refresh");

Answer 3

This little code will call your method if any radio button will selected.

and this keyword refer to your radio button which one is selected.

$('[name$="product_type"]:checked').each(function()
{
   yourmethod(this);
});