結合引導程序和驗證程序

Question

因此，我正在使用bootstrap重建我的註冊頁面。我正在嘗試使用jquery的驗證器插件來驗證表單。我做的第一件事是將表格分成三部分，每部分都有自己的標籤。表單的第一頁包含3個單選按鈕選項，在使用下一頁/選項卡/部分之前，用戶必須選擇其中一個選項。因此，這裏是我的html：

<ul class="nav nav-tabs"> 
    <li><a href="#options" data-toggle="tab">Options</a></li> 
    <li><a href="#information" data-toggle="tab">Information</a></li> 
    <li><a href="#payment" data-toggle="tab">Payment</a></li> 
</ul> 

<div class="tab-content"> 
    <div class="tab-pane active" id="options"> 
    <form id="frmtype1" action="" name="frmtype1" method="post"> 
     <header>Registration Options</header> 
     <br/> 
     <label for="Reg_type1" class="checkbox"> 
      <input type="radio" name="Reg_type" id="Reg_type1" value="1" validate="required:true"/> 
     Registering myself with credit card or bank account 
     </label> 
     <br> 
     <label for="Reg_type2" class="checkbox"> 
      <input type="radio" name="Reg_type" id="Reg_type2" value="2"/> 
     Registering multiple people using credit card or bank account 
     </label> 
     <br> 
     <label for="Reg_type3" class="checkbox"> 
      <input type="radio" name="Reg_type" id="Reg_type3" value="3"/> 
     Registering using a purchase order 
     </label> 
     <div class="form-actions"> 
      <span class="help-inline" style="display:none;">Please choose an option</span><button class="btn" type="submit">Next</button> 
     </div> 
    </form>    
    </div> 
    <div class="tab-pane" id="information">...</div> 
    <div class="tab-pane" id="payment">...</div> 
</div> 

然後我jQuery是：

var val1 = $('#frmtype1').validate(); 
$('#myTab a').click(function (e) { 
    e.preventDefault(); 
    $(this).tab('show'); 
}) 

我想要做的是，如果用戶試圖選擇一個選項之前，點擊下一步，我要顯示的嵌入式文本說Please choose an option否則移動到下一個選項卡上。我到底該怎麼做？

Answer 1

只要把這個jQuery驗證單選按鈕：

var val1 = $('#frmtype1').validate({ 
    errorPlacement: function(error, element) {}, //this is to prevent the standard error message from showing, rather you use the inline-text 
    rules: { 
     'Reg_type': { 
      required: true 
     } 
    } 
}); 

然後它來顯示/隱藏錯誤消息：

$('#frmtype1').submit(function(e) { 
    if(val1.form()) { 
     $('.help-inline').hide(); 
    } else { 
     $('.help-inline').show(); 
     return false; 
    } 
}); 

Answer 2

在活動選項卡中選擇表單並檢查它是否有效。如果不是，則顯示您的消息並停止該事件。

$(".nav-tabs a").click(function(e) { 
    var form = $(".tab-pane.active"); 
    if (!form.valid()) { 
     alert("You must complete the form before continuing to the next tab."); 
     return false; 
    } 
});