web-dev-qa-db-ja.com

Jqueryは複数のタブを検証し、一度に1つずつ検証しますか？

私はjQueryを初めて使用し、jQueryと検証プラグイン（http://docs.jquery.com/Plugins/Validation）を使用して、さまざまなセクションに複数のタブがあるマルチパートフォームを作成しようとしています。現在、複数のタブがあり、[次へ]ボタンが次のタブに切り替わります。

私が抱えている問題は、最終的に最後のページで送信すると、フォームは正しく検証されますが、他のページでエラーが発生した場合、ユーザーには通知されず、検証は実際には「送信」をクリックしたときにのみ発生することです。

[次へ]をクリックしたときに、それぞれを個別に検証するにはどうすればよいですか？複数のフォームを作成したり、非表示のフィールドを追跡したりしたくない：S何か提案はありますか？

ありがとう！

<script type="text/javascript">
$(document).ready(function() {
    //....stuff
    //tabs
    var tabs = $("#tabs").tabs();
    $(".nexttab").click(function() {
        //var selected = $("#tabs").tabs("option", "selected");
        //$("#tabs").tabs("option", "selected", selected + 1);
        $("#tabs").tabs("select", this.hash);
    });

    //use link to submit form instead of button
    $("a[id=submit]").click( function(){
        $(this).parents("form").submit();
    });

    //form validation
    var validator = $("#myForm").validate();    
});
</script>

<form class="cmxform" id="myForm" method="post" action="">
    <div id="tabs">
        <ul>
            <li><a href="#general">General</a></li>
            <li><a href="#tab2"></a></li>
        </ul>

        <div id="general">
             ....stuff...
            <p>
                <a class="nexttab navbutton" href="#tab2"><span>Next</span></a>  
            </p>
        </div>
        <div id="tab2">
            <h2>Tab2</h2>
            <p>
                <a class="nexttab navbutton" href="#general"><span>Prev</span></a>
                <a class="submit navbutton" id="submit" href="#"><span>Submit</span></a>
            </p>
        </div>
    </div>
</form>

編集：

@アンドリュー：

2番目の例とタブの無効化をいくつか組み合わせました。ページを更新してタブを再度無効にする以外は、機能しているようです。

var tabs = $("#tabs").tabs({

    disabled: [1,2,3,4,5],

    select: function(event, ui) {
        var valid = true;
        var current = $(this).tabs("option", "selected");
        var panelId = $("#tabs ul a").eq(current).attr("href");

        if(ui.index > current)
        {
            $(panelId).find("input").each(function() {
                //console.log(valid);

                if (!validator.element(this) && valid) {
                    valid = false;
                }
            });

        }

        return valid;
    }   

});

組み合わせ：

$(".nexttab").click(function() {
    var selected = $("#tabs").tabs("option", "selected");
    $("#tabs").tabs("enable", selected+1);
    $("#tabs").tabs("option", "selected", selected + 1);
});
javascriptjqueryformstabsjquery-validate
12
Jordan

これは、 .element(selector)validatorの関数を使用して可能です。これから行うことは、アクティブなタブの各要素を繰り返し処理し、入力でその関数を呼び出すことです。これにより、各要素の検証が順番にトリガーされ、検証メッセージが表示されます。

$(".nexttab").click(function() {
    var valid = true;
    var i = 0;
    var $inputs = $(this).closest("div").find("input");

    $inputs.each(function() {
        if (!validator.element(this) && valid) {
            valid = false;
        }
    });

    if (valid) {
        $("#tabs").tabs("select", this.hash);
    }
});

さらに、ユーザーが[次へ]をクリックする代わりに、タブをクリックして新しい入力セットに移動したときに、同様のコードを実行することをお勧めします。

これが実際の例です： http://jsfiddle.net/c2y6r/

更新：無効なフォーム要素でselectイベントをキャンセルする、別の方法があります。

var validator = $("#myForm").validate();
var tabs = $("#tabs").tabs({
    select: function(event, ui) {
        var valid = true;
        var current = $(this).tabs("option", "selected");
        var panelId = $("#tabs ul a").eq(current).attr("href");

        $(panelId).find("input").each(function() {
            console.log(valid);
            if (!validator.element(this) && valid) {
                valid = false;
            }
        });

        return valid;
    }
});

ただし、現在のページに無効なデータを入力したときにユーザーが戻ることを許可することを検討する必要があります。一方、ユーザーがタブまたは次のリンクをクリックすると起動される1つの関数内にすべての検証コードを保持するというボーナスが得られます。

例： http://jsfiddle.net/c2y6r/1/

更新2、タブインターフェイスを介してユーザーが後方に移動できるようにする場合：

var tabs = $("#tabs").tabs({
    select: function(event, ui) {
        var valid = true;
        var current = $(this).tabs("option", "selected");
        var panelId = $("#tabs ul a").eq(current).attr("href");

        if (ui.index > current) {

            $(panelId).find("input").each(function() {
                console.log(valid);
                if (!validator.element(this) && valid) {
                    valid = false;
                }
            });
        }

        return valid;
    }
});
11
Andrew Whitaker

既存のコードは私には機能しませんでした（おそらくそれは日付が付けられています）ので、私は次のことを思いつきました。この例では、jqueryタブとjqueryバリデーターの使用を想定しています。

$('#tabs').tabs(
{
    beforeActivate: function( event, ui )
    {   
        var valid = $("#myForm").valid();
        if (!valid) {
            validator.focusInvalid();
            return false;
        }
        else
            return true;
    }
});
0
vdidxho