Jqueryvalidation多个选项卡，一次validation一个？

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

我遇到的问题是，当我最后在最后一页上提交时，表单会正确validation，但如果其他页面上有错误，则不会通知用户，并且只有在单击“提交”时才会进行validation。

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

谢谢！

 $(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(); });  
 
 
 
General
 
 
 
 ....stuff... 
 Next 
 
 
 
Tab2
 
 Prev Submit 
 
 
  

编辑：

@安德鲁：

我做了第二个例子和禁用标签的组合。 似乎工作，除了让页面刷新重新禁用选项卡。

 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)函数。 您要做的是遍历活动选项卡上的每个元素并在输入上调用该函数。 这将依次触发每个元素的validation，显示validation消息。

 $(".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; } }); 

但是，现在您必须考虑允许用户在将无效数据输入当前页面时返回。 另一方面，如果用户单击选项卡或下一个链接，您将获得将所有validation代码保留在一个函数内的奖励。

示例： 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选项卡和jqueryvalidation器。

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