多步驟JavaScript驗證，以防止進行到其他步驟

Question

問題
我創建了一個多步驟的形式，是的JavaScript和所有功能已經正常，但我有這個問題。此外，用戶還可以使用2個選項來瀏覽表單，可以使用下一個按鈕或直接點擊表頭上的步驟。假設用戶有一個3組表格，但他有3個步驟。在我的代碼中，當他在步驟1中時，他不能移動到步驟2，並且必填字段爲空，與下一個按鈕相同。現在的問題是，如果他在步驟1中，並且他點擊步驟3，則即使在它們之間有必要的字段是空的，他也能夠繼續進行。我已經迷失在如何捕捉這個錯誤。

組的格式
組別按表格劃分1組在1個表格下劃分。

我如何格式化我的JS
我通過給它傳遞3個值來格式化我的JS。第一個值是當前類別名稱，第二個是類別列表，第三個是當前的下一個類別。

的第一個值用來檢查是否所有需要的字段被移動到下一步驟之前填充，該陣列是有隱藏所有其他類別以外的第三值「當用戶點擊下一步這樣做」 ，而第三個值用於顯示下一步。

預覽 http://screencast.com/t/QwSVFolb

的HTML

<li>step1</li> 
<li>step2</li> 
<li>step3</li> 
<table id ="cat1"></table> 
<table id ="cat2"></table> 
<table id ="cat3"></table> 

的JS

function dispFields2(a, b, c) 
     { 
      var valid2; 
      var blanks2 = Array(); 
      var email_reg2 = /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/; 
      var myVal2 = $('#'+c).find('input.required').map(function() { 
             return $(this).val(); 
             }).get().join(','); 
      var myTitle2 = $('#'+c).find('input.required').map(function() { 
             return $(this).attr("title"); 
             }).get().join(','); 

      var error_form2 = myVal2.split(','); 
       var error_title2 = myTitle2.split(','); 
       var errorlength2 = error_form2.length; 

       for(x=0;x<errorlength2;x++) 
       { 
        if(error_form2[x] == '') 
        { 
          if(myVal2 == '') 
          { 
           valid2 = true; 
          } 
          else 
          { 
          blanks2[x] = "Required - "+error_title2[x]; 
          valid2 = false; 
          } 
        } 
        else 
        { 
         if(error_title2[x] == 'Email') 
         { 
          if(email_reg2.test(String(error_form2[x]).toLowerCase())==false){ 
           blanks2[x] = error_title2[x]+" - Should be valid email"; 
           valid2 = false; 
          } 
         } 
         else 
         { 
          if(blanks2 == '') 
          { 
           valid2 = true; 
          } 
         } 
        } 

       } 
       var requiredS2 = blanks2.toString(); 
       var nblank2 = requiredS2.split(',').join("\n"); 

       if(valid2 != true) 
       { 
        alert("Please review:\n\n"+nblank2); 
        document.getElementById(c).style.display = ""; 
        document.getElementById(a).style.display = "none"; 
       } 
       else 
       { 
        var ssplit = b.split(','); 
        var fieldlength = ssplit.length; 
        var limit; 

        for(i=0;i<fieldlength;i++) 
        { 
         if(a == ssplit[i]) 
         { 

          limit = 1 + i; 
          document.getElementById(a).style.display = ""; 
          document.getElementById("tcont").style.display = ""; 
          document.getElementById(i).style.color = "#FF7300"; 
          if(limit == fieldlength) 
          { 
           document.getElementById("tbutton").style.display = ""; 
          } 
          else 
          { 
           document.getElementById("tbutton").style.display = "none"; 
          } 
         } 
         else 
         { 

          document.getElementById(ssplit[i]).style.display = "none"; 
          document.getElementById(ssplit[i]).style.color = ""; 
          document.getElementById(i).style.color = ""; 
         } 
        } 
          if(a == "default") 
          { 

           document.getElementById("captchas").style.display = "";    
          } 
          else 
          { 
           document.getElementById("captchas").style.display = "none";    
          } 
       }  
     } 

謝謝。

Answer 1

步驟3的按鈕開始處於禁用狀態，只有當用戶在步驟2時才啓用它。如果用戶從步驟2移回步驟1，請再次禁用它。