Question

我似乎无法找到任何与我正在尝试的完全相同的示例，即使它看起来像是最常见的示例。我在后端使用JSP，每次点击一个标签时都会点击数据库进行验证。我有5个选项卡，每个选项卡都有一个表单，因为这是用于编辑这些表单中的信息，所以文本字段已经填写。我需要做的是验证这些字段中的信息（如果已经编辑） - 我有已经 - 只要点击标签但信息不正确，用户就无法继续前进。现在棘手的部分是，用户可以点击5个选项卡中的任何一个，并且用户在导航选项卡时没有特定的顺序。这就是我遇到问题的地方。这是我的代码：

$(function() {
    $("#tabs").tabs({
    select: function(event, ui) {
    var $emptabs = $('#tabs').tabs();
    var selected = $emptabs.tabs('option', 'selected');
    //$('#tabs-' + selected).on('focusout', function() {
    //tabChange();
    alert('validating tab ' + ui.index);
    }
    });
    var firstName = $("#firstname").val();
    var middleInitial = $("#middleinitial").val();
    var lastName = $("#lastname").val();
    var suffix = $("#suffix").val();
    var gender = $("#gender").val();
    var dob = $("#dob").val();
    var ssn1 = $("#ssn1").val();
    var ssn2 = $("#ssn2").val();
    var ssn3 = $("#ssn3").val();
    var password1 = $("#password1").val();
    var password2 = $("#password2").val();
    var mrtlStsCd = $("#mrtlstscd").val();
    var strAddr1 = $("#straddr1").val();
    var strAddr2 = $("#straddr2").val();
    var city = $("#city").val();
    var state = $("#state").val();
    var zipCode = $("#zipcode").val();
    var zipPls4= $("#zippls4").val();
    var country = $("#country").val();
    var hmPhone = $("#hmphone").val();
    var cellPhone = $("#cellphone").val();

    $.ajax({
        async : "false",
        type: "POST", 
        url: "http://localhost/test/ActionServlet",
        data: { firstname: firstName, middleinitial: middleInitial, lastname: lastName, suffix: suffix, empgender: gender, dob: dob, ssn1: ssn1, ssn2: ssn2, 
                ssn3: ssn3, password1: password1, password2: password2, mrtlstscd: mrtlStsCd, straddr1: strAddr1, straddr2: strAddr2, city: city, state: state, zipcode: zipCode, zippls4: zipPls4, 
                country: country, hmphone: hmPhone, cellphone: cellPhone, step:1 },
        success: function(data) {
            var xmlDoc = null;

            if (window.DOMParser)
            {
               parser = new DOMParser();
               xmlDoc = parser.parseFromString(data,"text/xml");
            }
            else // Internet Explorer
            {
               xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
               xmlDoc.async = false;
               xmlDoc.loadXML(data); 
            }

            var status = xmlDoc.getElementsByTagName("status")[0].childNodes[0].nodeValue;

            if (status == "ok")
            {
                var nextPageID = xmlDoc.getElementsByTagName("nextpageid")[0].childNodes[0].nodeValue;
                 alert('valid');
                $('#personalmessage').hide();
                $emptabs.tabs('select', selected+1);
            }
            else if (status == "errors")
            {
                alert('not valid');
                var errorElements = xmlDoc.getElementsByTagName("error");
                var errors = "";

                for (var x= 0; x < errorElements.length; x++) 
                {
                    errors += errorElements[x].childNodes[0].nodeValue + "<br>";
                }

                $('#personalmessage').show();
                $("h2").html(errors);   
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            $('#personalmessage').show();
            $("h2").html(errorThrown);  
        }
    });
});

Answer 1

好吧，既然没有人回答我的问题，我得到了开发人员的帮助。我想这里没有人知道答案，或者只是不想回答。无论如何，我会很乐意分享我的解决方案。在父页面上，tabs脚本如下所示：

var $prevseltab = 0;
var $tabfuncs = {};
var $preventDefault;
var $bindTabs;
$(function() {
    $("#tabs").tabs();

    $preventDefault = function(e){
        e.preventDefault();
    }

    $bindTabs = function(){
        $("#tabs").bind("tabsselect", function(e, tab) {
            $tabfuncs[$prevseltab](e,tab.index);
            return false;
        });
    };

    $bindTabs();    
});

在子页面上，它看起来像这样：

$tabfuncs[0] = function(e,currtab) {

    var firstName = $("#firstname").val();
    var middleInitial = $("#middleinitial").val();

    $.ajax({
        async : "false",
        type: "POST", 
        url: "http://localhost/test/ActionServlet",
        data: { firstname: firstName, middleinitial: middleInitial, step:1 },
        success: function(data) {
            var xmlDoc = null;

            if (window.DOMParser)
            {
               parser = new DOMParser();
               xmlDoc = parser.parseFromString(data,"text/xml");
            }
            else // Internet Explorer
            {
               xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
               xmlDoc.async = false;
               xmlDoc.loadXML(data); 
            }

            var status = xmlDoc.getElementsByTagName("status")[0].childNodes[0].nodeValue;

            if (status == "ok")
            {
                 $('#personalmessage').hide();

                 var $emptabs = $('#tabs').tabs();
                 $emptabs.unbind("tabsselect");
                 $prevseltab = currtab;
                 $emptabs.tabs('select', currtab);
                 $bindTabs();
                 return true;
            }
            else if (status == "errors")
            {
                var errorElements = xmlDoc.getElementsByTagName("error");
                var errors = "";

                for (var x= 0; x < errorElements.length; x++) 
                {
                    errors += errorElements[x].childNodes[0].nodeValue + "<br>";
                }

                $('#personalmessage').show();
                $("h2").html(errors);   
                e.preventDefault();
                return false;
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            $('#personalmessage').show();
            $("h2").html(errorThrown);  
            return false;
        }
    });
};

$(function() {
    $('#tabs').on('click', '#submit1', function() {
        $tabfuncs[0]();
    });
});

随机选项卡验证

1 个答案: