jQueryバリデータとAJAXリクエストを同時に使用するには？

Question

私はjQuery Validation Pluginを使用しています。

私はAJAXを使用してログインページを送信しようとしていますが、同時にjQuery Validateを使用してフォームの検証を試みています。しかし私がそれを提出するとき、私はAJAX要求が提出された後に最後のフィールドを検証します。したがって、検証は行われていません。

フォームの送信ボタンが有効になるまで無効にするようにしようとしています。それで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

代わりの送信ボタンにclickイベントリスナーを使用して、フォーム上のsubmitイベントを使用します。また、.valid()メソッドを使用してフォームが有効かどうかを確認する必要があります。

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

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