如何同時使用jQuery驗證器和AJAX請求？

Question

我正在使用jQuery Validation Plugin。

我想使用AJAX提交我的登錄頁面，但同時我也試圖驗證表單使用jQuery驗證;但是，當我提交它時，我只驗證AJAX請求提交後的最後一個字段;因此沒有進行驗證。

我試圖讓表單的提交按鈕被禁用，直到驗證通過。然後允許AJAX請求在驗證後發生，否則將無法使用該按鈕;允許用戶使用回車或點擊按鈕提交表單。但它似乎沒有工作。

$(document).ready(function() { 
    $("#signin").validate({ 
     rules: { 
      username: { 
       required: true 
      }, 
      password: { 
       required: true, 
       minlength: 8, 
       maxlength: 50 
      } 
     }, 
     messages: { 
      username: { 
       required: "Your username is required." 
      }, 
      password: { 
       required: "Your password is required.", 
       minlength: "Passwords are between 8-50 characters.", 
       maxlength: "Passwords are between 8-50 characters." 
      } 
     } 
    }); 
    $("form .login").click(function() { 
     $.ajax(/* ... */); 

     return false; 
    }); 
}); 

Answer 1

而不是使用上提交按鈕，在表單中使用submit事件click事件偵聽器。您還需要使用.valid()方法檢查表單是否有效：

$("form").submit(function() { 
    if (!$("form").valid()) return; 

    var username = $("form #username").val(); 
    var password = $("form #password").val(); 
    // ... 
});