jQuery选项卡和验证

Question

我正在使用jQuery选项卡并验证所有字段被填充之前允许用户移动到下一个选项卡。在一些选项卡中，有些选项可供用户从多个选项中进行选择，有时，用户将单击选项1并选择选项2，但当他们尝试单击上一个按钮时，将验证这些字段，并且不会让它们直到他们填补了垃圾UX的所有领域。

我想只验证点击下一个按钮，而不是点击上一个按钮。

<a class="btn nexttab navbutton" href="#step1">Previous</a> 
<a class="btn nexttab navbutton" href="#step3">Next</a> 

这里是我使用当前的代码：

var validator = $("#start").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; 
    } 
}); 

为了尝试解决这个我添加了一个叫下一个按钮下一个按钮类只，然后试图改变这一行我假设检查任何输入：

$(panelId).find(":input").each(function() { 

到：

$(".nextbutton").click(function() { 

，但它允许用户移动到下一个屏幕而不必填写所有字段。

我该如何做到这一点，只有向前移动被验证？

http://jsfiddle.net/553xmzh3/1/

Answer 1

我想只在点击下一步按钮，但不是在点击向前按钮确认。 ....我怎样才能做到这一点，只有向前移动被验证？

只需在您的“上一个”按钮上放一个cancel类。当提交按钮包含cancel类时，所有验证规则将自动被忽略。但是，submitHandler将触发，就好像表单有效一样。

<input type="submit" value="PREVIOUS" class="cancel" /><!--// This submit will not trigger validation //--> 

<input type="submit" value="NEXT" /><!--// This submit will trigger validation //--> 

工作演示：http://jsfiddle.net/4zdL8ha3/

---

编辑：

虽然它仍然有效，using class="cancel" has been officially deprecated and replaced with formnovalidate="formnovalidate"

<input type="submit" value="PREVIOUS" formnovalidate="formnovalidate" /> 

工作演示：http://jsfiddle.net/4zdL8ha3/1/

---

由于您使用的锚标记，而不是type="submit"元素，该解决方案将不会为你工作。最好用button元素替换你的锚定标签。这样，使用CSS，您可以将button设置为与锚点完全相同的样式。

<button type="submit" class="btn nexttab navbutton" formnovalidate="formnovalidate">Previous</button> 
<button type="submit" class="btn nexttab navbutton">Next</button> 

工作演示：http://jsfiddle.net/4zdL8ha3/2/

---

编辑：

如果你必须在地方type="submit"按钮锚标记，那么你需要编写相应的点击处理程序和仅在“下一步”按钮处理程序上检查表单的有效性。使用.valid()方法还可以通过从标签切换器功能中删除您的自定义验证测试器来简化您的代码。

$(".nexttab").click(function() { // NEXT BUTTON 
    if ($("#start").valid()) { // TEST VALIDATION 
     $("#tabs").tabs("select", this.hash); 
    } 
}); 

$(".cancel").click(function() { // PREVIOUS BUTTON - NO VALIDATION TEST 
    $("#tabs").tabs("select", this.hash); 
}); 

初始化：

var validator = $("#start").validate(); 

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

DEMO：http://jsfiddle.net/553xmzh3/3/