3

現在、ページを更新せずに送信するために Javascript と ajax を使用しています。作業部分:最初の jquery-ui タブ内にフォームを配置しました。ユーザーが [次へ] ボタンをクリックするたびにフォームが送信され、結果が次のタブに表示されます。フォームが空のままでユーザーが次のボタンをクリックすると、エラー警告メッセージが表示されます。

メールと電話番号のフィールドの検証に関しては、壁にぶつかっています。ユーザーは好きなものを入れて次のタブに進むことができますが、これは大きな問題です。電話番号/電子メールの形式が間違っている場合に警告メッセージを表示する方法はありますか? 例

JavaScript/Ajax

   <script> 
 $(function () {
    var $tabs = $('#tabs').tabs({
        disabled: [0, 1],
        select: function () {
            $.ajax({
                type: "POST",
                url: "includes/post_tabs.php",
                data: {
                    "name": $("#contact_name").val(),
                    "email": $("#email").val(),
                    "phone": $("#phone").val()

                },
                success: function (result) {
                    $("#inputResult").html(result);
                }
            });
        }
    });


    $(".ui-tabs-panel").each(function (i) {
        var totalSize = $(".ui-tabs-panel").size() - 1;
        if (i != totalSize) {
            next = i + 2;
            $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page &#187;</a>");
        }
        if (i != 0) {
            prev = i;
            $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Prev Page</a>");
        }
    });


    $('.next-tab').click(function () {
        var currentTab = $('#tabs').tabs('option', 'selected');
        if (
        (
        currentTab == 0 && /*(A)*/
        $.trim($('#contact_name').val()).length > 0 && $.trim($('#phone').val()).length > 0 && $.trim($('#email').val()).length > 0
        )
        ) {
            var tabIndex = $(this).attr("rel");
            $tabs.tabs('enable', tabIndex).tabs('select', tabIndex).tabs("option", "disabled", [0, 1]);
        } else {
            switch (currentTab) {
            case 0:
                alert('Please fill out all the required fields.', 'Alert Dialog');
                break;

            }
        }
        console.log("preventing default");
        return false;
    });

    $('.prev-tab').click(function () {
        var tabIndex = $(this).attr("rel");
        $tabs.tabs('enable', tabIndex).tabs('select', tabIndex).tabs("option", "disabled", [0, 1]);
        return false;
    });

    });
        </script>
4

1 に答える 1

0

jQuery 検証および検証グループを確認してください。

Jquery 検証グループ

[次へ] をクリックすると、特定のフィールドのみを検証するように選択できます。

于 2012-09-07T04:24:48.963 に答える