1

そのため、登録ページをブートストラップで再構築しています。そして、フォームを検証するためにjqueryのバリデータープラグインを組み込んでいます。最初に、フォームを 3 つの部分に分割し、各部分に独自のタブを付けました。フォームの最初のページには 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それ以外の場合は次のタブに移動するというインラインテキストを表示したいということです。具体的にどうすればいいですか？

4

2 に答える 2

1

アクティブなタブでフォームを選択し、有効かどうかを確認します。そうでない場合は、メッセージを表示してイベントを停止します。

$(".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;
    }
});
于 2012-11-01T17:30:04.333 に答える
0

この 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;
    }
});
于 2012-11-01T18:03:54.350 に答える