jquery - 異なるタブの 2 つのフォームでの JQuery 検証

Question

2 つのタブで 2 つの異なるフォームを検証するための適切な解決策を見つけるのに苦労しています。データを投稿するために両方を有効にしたい。タブ用のブートストラップ フレームワークと jquery 検証を使用しています。

例を次に示します: http://jsfiddle.net/SLsde/

HTML

<div class="container">
<ul class="nav nav-pills" id="tabs">
    <li class="active"><a href="#tab1" data-toggle="pill">Tab 1</a></li>
    <li><a href="#tab2" data-toggle="pill">Tab 2</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="tab1">
        <form class="form" id="form1">
            <div class="form-group">
                <label>Input 1</label>
                <input id="input1" name="input1" type="text" class="form-control" />
            </div>

            <input id="Submit1" type="submit" class="btn btn-primary" value="Submit" />
        </form>
    </div>

    <div class="tab-pane" id="tab2">
        <form class="form" id="form2">
            <div class="form-group">
                <label>Input 2</label>
                <input id="input2" name="input2" type="text" class="form-control" />
            </div>

            <input id="Submit2" type="submit" class="btn btn-primary" value="Submit" />
        </form>
    </div>
</div>
</div>

JS

var form1 = $("#form1").validate({
    ignore: '',
    rules: {
        "input1": "required"
    }
});

var form2 = $("#form2").validate({
    ignore: '',
    rules: {
        "input2": "required"
    }
});

$("#form1").submit(function (e) {
    e.preventDefault();

    if (form1.valid() && form2.valid()) {
        alert("Post Data");
    } else {
        alert("Not Valid");
    }
});

$("#form2").submit(function (e) {
    e.preventDefault();

    if (form1.valid() && form2.valid()) {
        alert("Post Data");
    } else {
        alert("Not Valid");
    }
});

一方のタブで送信しようとして、もう一方のタブにデータがない場合でも、有効であると表示されます。空の状態で送信してから、他のタブに移動して送信すると、false と表示されます。多くの人が提案する ignore: '' を使用してみましたが、各タブにフォームの例があまり見つかりませんでした。

どんなアイデアでも役に立ちます。