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/