I want to create a wizard with a form validation with bootstrap. I use the Twitter Bootstrap Wizard Plugin from http://vadimg.com/twitter-bootstrap-wizard-example/. It uses jQuery Validate Plugin.

My problem is now that the validation of radio buttons does not work. I can skip through the tabs even if no radio button is checked.

Has anyone an idea what I've made wrong?

This is my Javascript-Code:

    <script>

$(document).ready(function() {

    var $validator = $(#commentForm).validate();



    $('#rootwizard').bootstrapWizard({

        'tabClass': 'nav nav-pills',

        'onNext': function(tab, navigation, index) {

            var $valid = $(#commentForm).valid();

            if(!$valid) {

                $validator.focusInvalid();

                return false;

            }

        }

    }); 

    window.prettyPrint && prettyPrint()

}); 

</script>

My input elements look like this here:

<div class=btn-group data-toggle=buttons>

<label class=btn btn-primary>

    <input class=required id=question21 name=question2 required= type=radio> 1</label> 

<label class=btn btn-primary>

    <input id=question22 name=question2 type=radio> 2</label> 

<label class=btn btn-primary>

    <input id=question23 name=question2 type=radio> 3</label> 

<label class=btn btn-primary>

    <input id=question24 name=question2 type=radio> 4</label> 

<label class=btn btn-primary>

    <input id=question25 name=question2 type=radio> 5</label></div>

Here the entire code of the site:
http://chopapp.com/#aj3u0kz1

Thanks in advance!