jQuery驗證 - 如何使用像表單一樣的嚮導中的步驟？

我想用jQuery Validation Plugin和jQuery UI Tabs。我如何使用jQuery Validation Plugin驗證下一個按鈕觸發的每一步。我看到jQuery Validation Plugin的例子，主要是用於整個表單的驗證。我需要一步一步來。jQuery驗證 - 如何使用像表單一樣的嚮導中的步驟？

我不是專業人士，所以請告訴我一些簡單的解決方案，而不是建議我其他插件。我的代碼看起來像：

$("#frag1").click(function(){ 
    //I need jQuery Validation code here for a single step 
    event.preventDefault(); 
}else { 
$('.next-tab, .prev-tab').click(function() { 
     $tabs.tabs('select', $(this).attr("rel")); 
     return false; 
    }); 
}

在此先感謝。

來源

2011-11-11 Imran

我認爲你只使用一種形式。因此，請調用http://docs.jquery.com/Plugins/Validation/Validator/element#element並將當前碎片的驗證代碼添加到下一個按鈕單擊事件中。檢查所有其他方法。知道你可以用這個解決方案。我是驗證插件的新手。 –

我意識到你不希望其他插件的建議。但我認爲這可能對您特別有用：

有jQuery的formwizard插件，http://thecodemine.org/

與jQuery的驗證插件很好地集成。同時也是jQuery-UI主題的主題（如果您已經在您的網站上使用它們）。

來源

2011-11-11 12:12:44

如何爲使用該插件的每個步驟製作選項卡？就像我在我的網站上使用的，請參閱上面的鏈接。 – Imran

更好的選擇移動這個插件..它似乎更多的功能默認。無需編寫代碼。 –

嗨@伊姆蘭你是對的我不認爲你可以很容易地使用像嚮導這樣的選項卡作爲formwizard，但是像納迦說formwizard帶有很多功能，所以你可能希望使用formwizard，因爲它可能會有其他功能可能會有用。 –

在下一步按鈕單擊檢查哪個片段div沒有「ui-tabs-hide」這個css類。然後嘗試爲所有輸入和複選框應用相同的CSS類（例如： - 「myinputs」），並且很快。然後應用當前「片段」div輸入驗證的驗證。

例如： - 如果我在步驟2中。那麼這個div「fragment-2」將不會有css類「ui-tabs-hide」。你可以看到這個班級適用於其他潛水。

因此，嘗試獲取當前的活動div ID（這裏是「fragment-2」）。然後做這樣的

http://docs.jquery.com/Plugins/Validation/Validator/element#element

$("#myform").validate().element("#myselect"); // here there are passing element ID 

$("#myform").validate().element('#'+ CurrentFragment + '.myinputs'); //here we are passing current fragment css class inputs.

我不知道它會接受CSS類。但嘗試一次循環，並處理假元素和return false沒有任何一步。因此，用戶不會移動到下一個片段，直到他設置了值。

我不確定這是最好的主意。我對這個驗證插件沒有太多的知識。

來源

2011-11-11 12:40:07

jQuery驗證 - 如何使用像表單一樣的嚮導中的步驟？

回答

相關問題