Question

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

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

有谁知道我做错了什么？

这是我的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"单选按钮设置为不需要。

显然，jQuery Validation插件优先于HTML5属性。

您只需使用一种声明规则的方法。使用class或HTML5属性，而不是两者。如果您决定保留HTML5属性，请使用required="required"。

修改：

引用OP的评论：

“...但是 <{em> class="required"或required="required"有效:-(你有其他想法吗？”

你的意思是说“既不”这些作品？这两种方法都完美无缺，还有另一种方法......

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

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

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

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

Bootstrap 3：带有表单验证的向导

1 个答案: