多步骤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，请再次禁用它。