jquery驗證時更改選項卡沒有提交

Question

我有一個窗體有4個選項卡，我希望能夠驗證當前選項卡，然後切換到新選項卡，當用戶單擊任何其他選項卡上。這是我到目前爲止有：

$("#tabs").tabs({ 
      beforeActivate: function(event, ui) { 

       var tab = ui.oldTab.index(); 
       var valid = true; 

       if (tab == 0 && ($('#txbYPSchool').val() == "" || $('#txbYPSubjectDesc').val() == "")) { 

        valid = false; 
       }; 


       if (!valid) { 
        //alert('not valid'); 

        event.preventDefault(); 
       } 
       else { 
        alert('valid'); 
       } 
      } 
     }); 

上述功能防止用戶選擇不同的選項卡，如果某些字段沒有填寫我也有驗證功能設置如下：

$("#form1").validate({ 

      rules: { 

       txbYPSchool: { required: true, nowhitespace: true }, 
       txbYPSubjectDesc: { required: true, nowhitespace: true } 

      }, 

      messages: { 

       txbYPSchool: "*This field is mandatory. If not in school, type 'Not in School'", 
       txbYPSubjectDesc: "*This field is mandatory" 

      }, 

      ignore: "" 
     }); 

如果在當前選項卡上仍有不完整的字段時，如何在用戶嘗試更改選項卡時運行驗證並顯示錯誤消息？我希望能夠在沒有按鈕點擊的情況下做到這一點，只有當用戶試圖改變標籤，但我不知道如何將驗證功能納入第一個功能。

我正在使用jquery 1.9.1和最新的驗證插件。

感謝

Answer 1

您可以使用可能插件的.valid() method。

替換此...

if (!valid) { 

這... ...

if !($("#form1").valid()) { 

則因爲插件檢查的有效性，你可以擺脫這一切......

var valid = true; 
if (tab == 0 && ($('#txbYPSchool').val() == "" || $('#txbYPSubjectDesc').val() == "")) { 
    valid = false; 
};