私は1日間壁に頭をぶつけて、簡単なタブ操作を理解しようとしています。3つのタブがあり、それぞれにフォームのさまざまな部分が含まれています。ユーザーが最初にいる間、2番目と3番目を無効にする必要があります。次に、最初のページに入力して[続行]をクリックし、検証がtrueを返したら、2番目のタブを有効にして、そこにスライドします。次に、2ページ目を終了し、[続行]をクリックして、検証がtrueを返したら、3番目のタブを有効にしてスライドします。主なことは、現在表示されているタブが検証されるまで、タブを無効にする必要があるということです。これが私のhtmlです:
<ul class="nav nav-tabs" id="myTab">
<li><a href="#options">Options</a></li>
<li><a href="#information">Information</a></li>
<li><a href="#payment">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"/>
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">
<button class="btn" type="submit">Continue</button><span class="help-inline" style="display:none;">Please choose an option</span>
</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[href="#information"]').tab('disabled'); //i have no idea how to prevent the user from navigating here so I just put disabled. Didn't work obviously
$('#myTab a[href="#payment"]').tab('disabled');
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) {
/*This will validate the first page, if the user didn't select an option then it will display
the inline text as an error message*/
if(val1.form()) {
$('.help-inline').hide();
} else {
$('.help-inline').show();
return false;
}
});
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
では、まず最初に、現在のタブのフォームがtrueであることが検証されるまで、後続のタブを無効にするにはどうすればよいですか?