私のJavascriptはajax呼び出しが完了するのを待つことはありません

Question

私は現在、Javascriptで登録検証のコードを書いています。検証機能がチェックしているものの1つは、ユーザーが提供した電子メールアドレスがすでに入っています。データベース。

これを確認するには、私はajaxを使用していますが、残りのJavaScriptは終了するのを待たないでください。

私はウェブ上で見つけた多くのソリューションを試しましたが、何も動作していないようです。

これは私のフォームです：

<form class="register-form" id="register-form" action="register.php" method="post" onSubmit="return registervalidation()"> 
    <input name="username" id="registerusername" type="text" placeholder="gebruikersnaam" maxlength="20"/> 
    <input name="password" id="registerpassword" type="password" placeholder="wachtwoord" maxlength="20"/> 
    <input name="email" id="registeremail" type="text" placeholder="emailadres" maxlength="50"/> 
    <p class="error" id="register-error"></p> 
    <input type="submit" value="Aanmaken"/> 
    <p class="message">Heb je al een account? <a href="#">Log in</a></p> 
</form> 

これは、Javascriptのコードです：

<script> 

var invalid = 0; 

function registervalidation() { 

    invalid = 0; 
    document.getElementById("register-error").innerHTML = ""; 

    if (document.getElementById("registerusername").value == "") { 
     document.getElementById("register-error").innerHTML = "Gelieve een gebruikersnaam in te typen.<br>"; 
     invalid += 1; 
    } 

    else { 
     if (document.getElementById("registerusername").value.match(/^[a-zA-Z0-9]+$/)) { 
      /* Input is oke */ 
     } 
     else { 
      /* Input is niet oke */ 
      document.getElementById("register-error").innerHTML = "Een gebruikersnaam mag enkel bestaan letters en cijfers.<br>"; 
      invalid += 1 
     } 
    } 

    if (document.getElementById("registerpassword").value == "") { 
     var red = document.getElementById("register-error").innerHTML; 
     document.getElementById("register-error").innerHTML = red + "Gelieve een wachtwoord in te typen.<br>"; 
     invalid += 1; 
    } 

    else { 
     if (document.getElementById("registerpassword").value.match(/^[a-zA-Z0-9]+$/)) { 
      /* Input is oke */ 
     } 
     else { 
      /* Input is niet oke */ 
      var red = document.getElementById("register-error").innerHTML; 
      document.getElementById("register-error").innerHTML = red + "Een wachtwoord mag enkel bestaan uit letters en cijfers.<br>"; 
      invalid += 1; 
     } 
    } 

    if (document.getElementById("registeremail").value == "") { 
     var red = document.getElementById("register-error").innerHTML; 
     document.getElementById("register-error").innerHTML = red + "Gelieve een emailadres in te typen.<br>"; 
     invalid += 1; 
    } 

    else { 

     if (document.getElementById("registeremail").value.indexOf("@") == -1) { 
      var red = document.getElementById("register-error").innerHTML; 
      document.getElementById("register-error").innerHTML = red + "Gelieve een geldig emailadres in te typen.<br>"; 
      invalid += 1; 
    } 

    else { 

     var checkmail = $('#registeremail').val(); 
     $.ajax({ 
     url: "validation.php", 
     type: 'POST', 
     data: 'email=' + checkmail, 
     success: function(result){ 
      if(result == null){ 
      } 
      else{ 
      var red = document.getElementById("register-error").innerHTML; 
      document.getElementById("register-error").innerHTML = red + "Dit emailadres is reeds in gebruik.<br>"; 
      invalid += 1; 
      } 
      } 
    }); 


    } 

    } 

    if (invalid != 0) { 
     return false; 
    } 

    else { 
     return true; 
    } 
} 

</script> 

そして、これが私のvalidation.phpファイルです：

<?php 
header('content-type: text/json'); 

//no need to continue if there is no value in the POST username 
if(!isset($_POST['email'])) 
    exit; 

//initialize our PDO class. You will need to replace your database credentials respectively 
$db = new PDO('mysql:host=localhost;dbname=cheapgamer','root','',array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8")); 

//prepare our query. 
$query = $db->prepare('SELECT * FROM members WHERE email = :email'); 
//let PDO bind the username into the query, and prevent any SQL injection attempts. 
$query->bindParam(':email', $_POST['email']); 
//execute the query 
$query->execute(); 

//return the json object containing the result of if the username exists or not. The $.post in our jquery will access it. 
echo json_encode(array('exists' => $query->rowCount() > 0)); 
?> 

検証が完全に正常に動作します唯一のエラーが電子メールアドレスが既にデータベースに存在する場合ではありません。

ありがとうございます！デニス

Answer 1

は、関数を作成し、Ajaxは完全なるまで停止したいあなたのjavascriptのコードを置きます。

この関数をajax success関数の内部から呼び出します。そのコードは、Ajaxが完了するまで実行されません。

これはうまくいきます。

Answer 2

名前が示すように、AJAXリクエストは非同期であるため、コードは引き続き実行されます。この問題を解決するには、function registervalidationに常にfalseを返し、PHPからの応答が有効な場合は、フォームからsubmit()メソッドを呼び出します。

var checkmail = $('#registeremail').val(); 
$.ajax({ 
    url: "validation.php", 
    type: 'POST', 
    data: 'email=' + checkmail, 
    success: function(result){ 
    if (result != null){ 
     var red = document.getElementById("register-error").innerHTML; 
     document.getElementById("register-error").innerHTML = red + "Dit emailadres is reeds in gebruik.<br>"; 
     invalid += 1; 
    } else { 
     // Call $(form).submit(); 
    } 
    } 
}); 

さて、あなたはonSubmit属性をリファクタリングする必要があります心に留めて、それ以外の場合は、何度も繰り返し実行します。