javascript - Bootstrap 3: wizard with form validation - Stack Overflow

admin管理员组

文章数量:1315968

I want to create a wizard with a form validation with bootstrap. I use the Twitter Bootstrap Wizard Plugin from /. 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 = $("#mentForm").validate();

    $('#rootwizard').bootstrapWizard({
        'tabClass': 'nav nav-pills',
        'onNext': function(tab, navigation, index) {
            var $valid = $("#mentForm").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:

Thanks in advance!

I want to create a wizard with a form validation with bootstrap. I use the Twitter Bootstrap Wizard Plugin from http://vadimg./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 = $("#mentForm").validate();

    $('#rootwizard').bootstrapWizard({
        'tabClass': 'nav nav-pills',
        'onNext': function(tab, navigation, index) {
            var $valid = $("#mentForm").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./#aj3u0kz1

Thanks in advance!

• javascript
• jquery
• html
• jquery-validate
• twitter-bootstrap-3

Share Improve this question Follow asked Nov 21, 2013 at 14:51 MaxMax 9722 gold badges33 silver badges99 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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/MHWmx/

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

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

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

本文标签： javascriptBootstrap 3 wizard with form validationStack Overflow