Wie jQuery Validator und AJAX-Anfrage gleichzeitig verwenden?

Question

Ich verwende jQuery Validation Plugin.

Ich versuche, meine Anmeldeseite mit AJAX einzureichen, aber gleichzeitig versuche ich, das Formular mit jQuery Validate zu validieren; Aber wenn ich es einreiche, validiere ich nur das letzte Feld, nachdem die AJAX-Anfrage eingereicht wurde; daher findet keine Validierung statt.

Ich versuche, die Übermittlungsschaltfläche des Formulars deaktiviert zu werden, bis die Überprüfung bestanden wurde. Lassen Sie dann die AJAX-Anfrage zu, sobald sie validiert ist, wird die Schaltfläche deaktiviert; Ermöglichen, dass der Benutzer das Formular über die Eingabetaste oder den Button abschickt. Es scheint jedoch nicht zu funktionieren.

$(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

Statt click Ereignis-Listener verwenden Taste auf einreichen, verwenden submit Ereignis auf Formular. Außerdem müssen Sie prüfen, ob das Formular unter Verwendung der .valid()-Methode gültig ist:

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

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