Jquery验证多个选项卡，一次验证一个选项卡？

Question

我是新来的jQuery，我试图使用它和验证插件（http://docs.jquery.com/Plugins/Validation）来创建一个包含多个选项卡的不同部分的多部分表单。现在我有它有多个选项卡，并且“下一步”按钮切换到下一个选项卡。

我遇到的问题是，当我最后在最后一页上提交时，表单验证正确，但如果在其他页面上有错误，用户不会收到通知，并且验证实际上只发生一次“提交”被点击。

当我点击“下一步”时，我将如何验证每个单独的？我真的不想创建多个表单或跟踪隐藏的字段：S有什么建议吗？

谢谢！

<script type="text/javascript"> 
$(document).ready(function() { 
    //....stuff 
    //tabs 
    var tabs = $("#tabs").tabs(); 
    $(".nexttab").click(function() { 
     //var selected = $("#tabs").tabs("option", "selected"); 
     //$("#tabs").tabs("option", "selected", selected + 1); 
     $("#tabs").tabs("select", this.hash); 
    }); 

    //use link to submit form instead of button 
    $("a[id=submit]").click(function(){ 
     $(this).parents("form").submit(); 
    }); 

    //form validation 
    var validator = $("#myForm").validate();  
}); 
</script> 

<form class="cmxform" id="myForm" method="post" action=""> 
    <div id="tabs"> 
     <ul> 
      <li><a href="#general">General</a></li> 
      <li><a href="#tab2"></a></li> 
     </ul> 

     <div id="general"> 
      ....stuff... 
      <p> 
       <a class="nexttab navbutton" href="#tab2"><span>Next</span></a> 
      </p> 
     </div> 
     <div id="tab2"> 
      <h2>Tab2</h2> 
      <p> 
       <a class="nexttab navbutton" href="#general"><span>Prev</span></a> 
       <a class="submit navbutton" id="submit" href="#"><span>Submit</span></a> 
      </p> 
     </div> 
    </div> 
</form> 

编辑：

@Andrew：

我做你的第二个示例和禁用标签的某种组合。似乎工作，除了刷新页面重新禁用标签。

var tabs = $("#tabs").tabs({ 

    disabled: [1,2,3,4,5], 

    select: function(event, ui) { 
     var valid = true; 
     var current = $(this).tabs("option", "selected"); 
     var panelId = $("#tabs ul a").eq(current).attr("href"); 

     if(ui.index > current) 
     { 
      $(panelId).find("input").each(function() { 
       //console.log(valid); 

       if (!validator.element(this) && valid) { 
        valid = false; 
       } 
      }); 

     } 

     return valid; 
    } 

}); 

在结合：

$(".nexttab").click(function() { 
    var selected = $("#tabs").tabs("option", "selected"); 
    $("#tabs").tabs("enable", selected+1); 
    $("#tabs").tabs("option", "selected", selected + 1); 
}); 

Answer 1

这是可能的使用的validator的.element(selector)功能。你要做的是遍历活动选项卡上的每个元素，并在输入中调用该函数。这将依次触发每个元素的验证，并显示验证消息。

$(".nexttab").click(function() { 
    var valid = true; 
    var i = 0; 
    var $inputs = $(this).closest("div").find("input"); 

    $inputs.each(function() { 
     if (!validator.element(this) && valid) { 
      valid = false; 
     } 
    }); 

    if (valid) { 
     $("#tabs").tabs("select", this.hash); 
    } 
}); 

此外，你可能会想，当用户点击一个选项卡进入到一个新的组输入，而不是单击“下一步”即可运行类似的代码。

这里有一个工作示例：http://jsfiddle.net/c2y6r/

更新：这里的另一种方式，你可以做到这一点，取消在无效的表单元素select事件：

var validator = $("#myForm").validate(); 
var tabs = $("#tabs").tabs({ 
    select: function(event, ui) { 
     var valid = true; 
     var current = $(this).tabs("option", "selected"); 
     var panelId = $("#tabs ul a").eq(current).attr("href"); 

     $(panelId).find("input").each(function() { 
      console.log(valid); 
      if (!validator.element(this) && valid) { 
       valid = false; 
      } 
     }); 

     return valid; 
    } 
}); 

但是，现在你必须考虑让用户在输入无效数据后返回当前页面。另一方面，如果用户点击一个标签或下一个链接，您将获得将所有验证代码保存在一个函数中的优势。

例子：http://jsfiddle.net/c2y6r/1/

更新2，如果你想要让人们通过选项卡界面向后导航：

var tabs = $("#tabs").tabs({ 
    select: function(event, ui) { 
     var valid = true; 
     var current = $(this).tabs("option", "selected"); 
     var panelId = $("#tabs ul a").eq(current).attr("href"); 

     if (ui.index > current) { 

      $(panelId).find("input").each(function() { 
       console.log(valid); 
       if (!validator.element(this) && valid) { 
        valid = false; 
       } 
      }); 
     } 

     return valid; 
    } 
}); 

Answer 2

现有的代码并没有为我工作（也许它过时）所以我想出了以下内容。这个例子假设使用jquery选项卡和jQuery验证器。

$('#tabs').tabs(
{ 
    beforeActivate: function(event, ui) 
    { 
     var valid = $("#myForm").valid(); 
     if (!valid) { 
      validator.focusInvalid(); 
      return false; 
     } 
     else 
      return true; 
    } 
});