Bootstrap 3：帶有表單驗證的嚮導

Question

我想創建一個帶引導程序的表單驗證嚮導。我使用http://vadimg.com/twitter-bootstrap-wizard-example/的Twitter引導向導插件。它使用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"單選按鈕設定爲不需要。

顯然，jQuery驗證插件優先於HTML5屬性。

您只需要使用一種聲明規則的方法。使用class或HTML5屬性，而不是兩者。如果您決定保留HTML5屬性，請使用required="required"。

---

編輯：

報價OP的評論： 「......但無論class="required"或required="required"作品:-(你有另一個想法」

您的意思是說「既不是」那些作品？這兩種工作都很好，還有另一種方法......通過class="required"宣佈

規則：由required="required"宣佈http://jsfiddle.net/MHWmx/

規則：內.validate()聲明http://jsfiddle.net/MHWmx/1/

規則：http://jsfiddle.net/MHWmx/2/

否則，在代碼中有一個問題，你有沒有所示。