Bootstrap 3: wizard with form validation

Question

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!

Solution

You've declared the required rule twice in your HTML markup...

<input class="required" id="question21" name="question2" required="" type="radio"> 

1) By class: class="required" is declaring the name="question2" radio button set as required.

2) By HTML5 attribute: required="" is declaring the name="question2" radio button set as not required.

Apparently the jQuery Validation plugin gives precedence to the HTML5 attribute.

You only need to use one method of declaring the rule. Use class or HTML5 attribute, not both. If you decide to keep the HTML5 attribute, then use required="required".

---

EDIT:

Quote OP's Comment:

"... But either class="required" or required="required" works :-( Do you have another idea?"

Did you mean to say "neither" of those works? Both of those work perfectly fine, as well as another method...

Rule declared by class="required": http://jsfiddle.net/MHWmx/

Rule declared by required="required": http://jsfiddle.net/MHWmx/1/

Rule declared within .validate(): http://jsfiddle.net/MHWmx/2/

Otherwise, there's a problem in code you have not shown.