jQuery Validate Plugin not working on radio buttons

Question

I have a large, multi-page form set up with the jQuery validation plugin. Everything seems to validate perfectly except for the radio buttons. I have spent hours reading through dozens of similar threads and none of the solutions offered seem to work.

I have tried adding

class="required"

and

required="required"

and just

required

directly to the input attributes on the first radio button and none of them work.

I have also added

rules: {
        myRadioGroupName: {
            required: true
        }

to no avail.

I have set up a fiddle with a complete mockup including all dependencies.

http://jsfiddle.net/j2372/2/

The 'Next' button navigation is not working properly on the fiddle, but the tab navigation at the top is. Click the "License" tab and then click "Next" to see the validation is working, just not on the radio groups. Where did i go wrong?

Answer 1

I think the most basic problem is happening here - the Validate plugin only works on visible things. So because you are using Bootstrap radio button sets, it hides the actual radios, and thus Validate ignores them.

It looks like you can get around this by just adding the ignore option to your validate call:

$("#rdrapply").validate({
    ignore:'',
    rules: {
       //etc
    }
});

Once I put that in, it immediately started throwing the errors (in an ugly way but you can work around that in your errorPlacement function if needed).