隨機標籤驗證

我似乎無法找到任何與我想要做的完全相同的示例，儘管它看起來像是最常見的示例。我爲後臺使用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); 
     } 
    }); 
});

來源

2013-01-23 alien.ninja

那麼，因爲沒有人回答我的問題，我從這裏得到了開發人員的幫助。我猜這裏沒有人知道答案或只是不想回答。無論如何，我會很好地分享我的解決方案。在父頁面的選項卡的腳本是這樣的：

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](); 
    }); 
});

來源

2013-01-25 20:22:22

隨機標籤驗證

回答

相關問題