javascript - Bootstrap 3 : wizard with form validation

Question

我想创建一个带有 Bootstrap 表单验证的向导。我使用来自 http://vadimg.com/twitter-bootstrap-wizard-example/ 的 Twitter Bootstrap 向导插件.它使用 jQuery 验证插件。

我现在的问题是单选按钮的验证不起作用。即使没有选中单选按钮，我也可以跳过“选项卡”。

有人知道我做错了什么吗？

这是我的 Javascript 代码:

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

我的输入元素在这里看起来像这样:

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

这里是网站的全部代码: http://chopapp.com/#aj3u0kz1

提前致谢!

Answer 1

您已经在 HTML 标记中声明了两次 required 规则...

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

1) 按类别: class="required" 声明 name="question2" 单选按钮设置为必需.

2) 通过 HTML5 属性: required="" 声明 name="question2" 单选按钮设置为 not需要。

显然，jQuery 验证插件优先考虑 HTML5 属性。

您只需要使用一种方法来声明规则。使用 class 或 HTML5 属性，不能同时使用。如果您决定保留 HTML5 属性，请使用 required="required"。

---

编辑:

引用 OP 的评论:

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

您的意思是说那些作品“两者都不是”吗？这两种方法都很好，还有另一种方法……

class="required" 声明的规则:http://jsfiddle.net/MHWmx/

required="required" 声明的规则:http://jsfiddle.net/MHWmx/1/

在 .validate() 中声明的规则:http://jsfiddle.net/MHWmx/2/

否则，您未显示的代码有问题。