最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin2浏览0评论

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!

Share Improve this question asked Nov 21, 2013 at 14:51 MaxMax 972 gold badges3 silver badges9 bronze badges
Add a ment  | 

1 Answer 1

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.

发布评论

评论列表(0)

  1. 暂无评论