Javascript/Ajax: Checking for valid email and phone numbers via button click

Question

I am currently working with Javascript and ajax to submit without a page refresh. The working part: I have placed a form inside the first jquery-ui tab. The form is submitted every time the user clicks the Next button and the results will be displayed in the next tab. If the form is left empty and user clicks next button an error alert message will display.

I am running into a wall when it comes to validating the email and phone number fields. The user can put whatever they want and still move on to the next tab and this is big issue. Is there a way to have an alert message display when a phone number/email is in the wrong format? Example

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>

Answer 1

Check out jQuery validate and validation groups.

Jquery validation groups

You can choose to validate only certain fields when you click next.