Wie warten Sie, bis die Ajax-Validierung abgeschlossen ist, bevor Sie ein Formular abschicken?

Question

Wenn ein Problem auftritt, bei dem das Formular vor der validateUsername-Funktion übermittelt wird, besteht die Möglichkeit, die Überprüfung des Benutzernamens auf der Serverseite abzuschließen.

Wie reiche ich das Formular erst nach Abschluss der Funktion validateUsername ein? Hoffnung, das ist klar ...

form.submit(function(){ 
    if (validateUsername() & validateEmail() & validatePassword()) { 
     return true; 
    } else { 
     return false; 
    } 
});   

function validateUsername(){    
    usernameInfo.addClass("sign_up_drill"); 
    usernameInfo.text("checking..."); 
    var b = username.val(); 
    var filter = /^[a-zA-Z0-9_]+$/;  
    $.post("../username_check.php",{su_username:username.val()},function(data) { 
     if (data=='yes') { 
      username.addClass("error"); 
      usernameInfo.text("sorry, that one's taken"); 
      usernameInfo.addClass("error"); 
      return false;   
     } else if (!filter.test(b)) { 
      username.addClass("error"); 
      usernameInfo.text("no funny characters please"); 
      usernameInfo.addClass("error"); 
      return false; 
     } else { 
      username.removeClass("error"); 
      usernameInfo.text("ok"); 
      usernameInfo.removeClass("error");  
      return true;  
     } 
    });    
} 

Answer 1

Ausführlichere Version von Olafurs Antwort - Der AJAX-Aufruf wird ausgeführt und die Funktion kehrt ohne Warten zurück.

Der Rückruf wird erst abgeschlossen, nachdem Sie das Formular abgeschickt haben.

Was Sie tun sollten, ist der Button/Auslöser, der die AJAX-Validierung aufruft, und der Callback sollte das Formular einreichen, anstatt true zurückzugeben.

Answer 2

Sie können nicht in einem AJAX-Aufruf zurück. Ich schlage vor, Sie lesen this section der jQuery FAQ. Besonders der Teil über Rückrufe. (das letzte Code-Snippet)

Answer 3

Ich empfehle

1) ein verstecktes Feld in Ihrem Formular.
2) Setzen Sie den Wert auf 0, bevor Sie eine der Funktionen aufrufen, die eine AJAX-Anfrage stellen.
3) Erhöhen Sie den Wert, wenn die einzelnen Funktionen erfolgreich validiert wurden.
4) Legen Sie eine bestimmte Anzahl von Sekunden fest (d. H. Zeit/Timeout, die benötigt wird, um alle AJAX-Anfragen + ein paar Sekunden abzuschließen), bevor Sie den Wert dieses ausgeblendeten Feldes überprüfen. Überprüfen Sie, ob der Wert 3 ist (wenn 3 AJAX-Aufrufe zur Validierung vorhanden waren), und lassen Sie ihn dann senden.

Ich denke, es wird besser sein, Validierung zu tun, wenn die Steuerung den Fokus verliert. Aktivieren Sie die Übermittlungsschaltfläche nur, wenn alle Steuerelemente die Überprüfung bestehen.

Tut mir leid, ich bin nicht vertraut mit JQuery, aber ich werde das tun, wenn ich plain javascript verwenden würde.

Answer 4

Die jQuery form validation plugin kümmert sich darum für Sie - ich kann es nur wärmstens empfehlen.

Einige Codebeispiel:

$("#myform").validate({ 
    rules: { 
    email: { 
     required: true, 
     email: true 
    }, 
    username: { 
     required: true, 
     remote: { 
     url: "../username_check.php", 
     type: "post", 
     } 
     } 
    } 
    } 
}); 

Answer 5

In jQuery gibt es eine Lösung für das gleiche. Ich muss überprüfen, ob ein Benutzer in meiner Anwendung existiert oder nicht. Hier ist der Code:

var pars = "username="+ username; 
var some = $.ajax({url: 'AjaxUserNameExist.php', 
    type: 'GET', 
    data: pars, 
    async: false 
}).responseText; 


if(some=="1") //this is value Got from PHP 
{ 
    alert("We cannot Go"); 
    return false; 
} 

if(some=="0") 
{ 
    alert("We can Go"); 
    return true; 
} 

Answer 6

Warum nicht einfach $('#yourFormId').submit(); verwenden, nachdem Sie ein Ergebnis von Ihrem Ajax-Backend erhalten haben?

Answer 7

Ich habe vor kurzem ein ähnliches Problem behandelt. Unter bestimmten Umständen kann durch Drücken der Eingabetaste in einem Eingabefeld das Senden des Formulars erfolgen. Ich habe versucht, dies auf verschiedene Arten zu beheben, und dann haben sich die erforderlichen Spezifikationen geändert, so dass durch Drücken der Eingabetaste oder Loslassen auf einem Gerät eine Formularübermittlung ermöglicht wird. Meine Lösung war genau das, was zu der Zeit für mich Sinn machte.

var form_submit = false; 

function validateInput() { 

    var field_value = $('#username').val(); 

    $.post('validation.php', {'input': field_value }, function (d) { 
     if (d.valid) { 

      form_submit = true; 
      $('form').submit(); 

     } else { 

      //error message or whatever 

     } 
    }, 'json'); 

} 

$('form').submit(function() { 

    if (form_submit) { 
     return true; 
    } else { 
     validateInput(); 
     return false; 
    } 

});