onsubmitはfalseを返しますが、サブミットはとにかく実行されます。

Question

もう一度迷子になります。私は自分のHTMLフォームからonchangeによって呼び出されたときに望ましい出力を生成する3つのJS関数を持つ登録フォームを持っています。したがって、ユーザーはフォームに記入している間にBS警告を生成します。これらは、次の3つの機能です：

パスワードの長さを確認するには：

function checkPassword() { 
    var x = document.registerForm; 
    var wachtwoord = x.wachtwoord.value; 
    var errMsgHolder = document.getElementById("message"); 
    if (wachtwoord.length < 3 || wachtwoord.length >30) { 
     errMsgHolder.innerHTML = 
      '<div class="alert alert-warning"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Let op!</strong> Kies een wachtwoord van minimaal 3 en maximaal 30 tekens.</div>'; 
     setTimeout(function() {document.getElementById("message").innerHTML =''; }, 5000); 
     return false; 
    } 
} 

2つのパスワードが一致しているかどうかを確認するには：

function checkPasswordsMatch() { 
    var x = document.registerForm; 
    var wachtwoord = x.wachtwoord.value; 
    var herhaal_wachtwoord = x.herhaal_wachtwoord.value; 
    var errMsgHolder = document.getElementById("message"); 
    if (wachtwoord !== herhaal_wachtwoord) { 
     errMsgHolder.innerHTML = 
      '<div class="alert alert-warning"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Let op!</strong> Wachtwoorden komen niet overeen.</div>'; 
      return false; 
    } 
} 

をユーザ名がすでにデータベースにPHPを経由して（AJAX呼び出しが存在するかどうかを確認するには）：

function checkBestaandeGebruikersnaam(){ 
var x = document.registerForm; 
var gebruikersnaam = x.gebruikersnaam.value; 
var errMsgHolder = document.getElementById("message"); 
var request = new XMLHttpRequest(); 

request.onreadystatechange = function() { 
    if(request.readyState === 4 && request.status === 200) { 
     if(request.responseText == "1") { 
      errMsgHolder.innerHTML = '<div class="alert alert-warning"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Let op!</strong> Die gebruikersnaam is al bezet, kies een andere gebruikersnaam.</div>'; 
     return false; 
     } 
     else { 
      errMsgHolder.innerHTML = ''; 
     } 
    } else { 
     errMsgHolder.innerHTML = 'An error occurred during your request: ' + request.status + ' ' + request.statusText; 
    } 
    } 
request.open("POST", "core/functions/checkBestaandeGebruikersnaam.php", true); 
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
request.send("gebruikersnaam="+gebruikersnaam); 
} 

しかし、これらの機能はアラートを表示するだけであり、ユーザーからの送信を妨げません不正なデータを含むフォームだから私はユーザーが提出するときにこれらの機能を再訪したい。私は私のHTMLレジスタフォームに次の行があることを行うには：

<form action="register.php" onsubmit="return validate()" name="registerForm" method="post" class="col-md-10 col-md-offset-1 col-xs-12 col-xs-offset-0"> 

を次にJSに私は、次の機能を持っている：私はこれをテストするときには、checkPassword()とcheckPasswordsMatch()ため

function validate() { 
var errMsgHolder = document.getElementById("message"); 
if(checkPassword() === false) { 
    errMsgHolder.innerHTML = 
      '<div class="alert alert-warning"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Let op!</strong> Kies een wachtwoord van minimaal 3 en maximaal 30 tekens.</div>'; 
      return false; 
} else if(checkPasswordsMatch() === false){ 
    errMsgHolder.innerHTML = 
      '<div class="alert alert-warning"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Let op!</strong> Wachtwoorden komen niet overeen.</div>'; 
      return false; 
} else if(checkBestaandeGebruikersnaam() === false){ 
    errMsgHolder.innerHTML = 
      '<div class="alert alert-warning"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Let op!</strong> Die gebruikersnaam is al bezet, kies een andere gebruikersnaam.</div>'; 
      return false; 
} 

動作します。意味するのは、予想されるBSアラートが得られ、フォームの提出がキャンセルされたことです。しかし、私がcheckBestaandeGebruikersnaam()をテストするとき、それはしません。それは簡単にBSの警告を示していますが、私のregister.phpファイルに続きます。何らかの理由で返された「偽」を無視して提出します。

私はそれの周りに頭を上げることはできません。なぜこれを別の方法でやっているのですか？問題に誰かが気をつけてもらえますか？

編集：私はリンクをたどり、コールバック関数の概念を把握しようとしていました。私は今それを持っていると思うが、私の問題は解決されていない。だから私はまだ何か間違っている必要があります。

問題は明らかに私が関数checkBestaandeGebruikersnaam()から偽を返す方法であるため、その関数の変更点のみをリストします。私は今、次のコードを持っている：

HTML：

onchange="callAjax(checkBestaandeGebruikersnaam)" 

JavaScriptの主な機能：

function callAjax(callback){ 
var gebruikersnaam = document.registerForm.gebruikersnaam.value; 
var request = new XMLHttpRequest(); 

request.onreadystatechange = function() { 
    if(request.readyState === 4 && request.status === 200) { 
     callback(request.responseText); 
    } else { 
     document.getElementById("message").innerHTML = 'An error occurred during your request: ' + request.status + ' ' + request.statusText; 
    } 
    } 
request.open("POST", "core/functions/checkBestaandeGebruikersnaam.php", true); 
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
request.send("gebruikersnaam="+gebruikersnaam); 
} 

JavaScriptのコールバック関数：

function checkBestaandeGebruikersnaam(result) { 
if(result == "1") { 
    document.getElementById("message").innerHTML = '<div class="alert alert-warning"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Let op!</strong> Die gebruikersnaam is al bezet, kies een andere gebruikersnaam.</div>'; 
    return false; 
} 
else { 
    document.getElementById("message").innerHTML = ''; 
} 
} 

私が使用している場合

誰かが教えてもらえますコールバック機能は正しくですか？期待どおりに実行されます（onchangeイベントの場合）。

validate()はまだcheckBestaandeGebruikersnaam()では機能しません。 checkBestaandeGebruikersnaam() === falseであっても実行されます。私は今何が間違っていますか？私に教えて、あなたの時間を感謝してください。

Answer 1

は、私は、フォームのonSubmit検証プロパティを削除し、代わりに を使用し、ボタンのOnClickプロパティ提出する必要があると思う：

のonclick =「リターン・検証を（）;」

これは機能します。 ありがとう！

Answer 2

checkBestaandeGebruikersnaamfalseを返すことはありません。コールバック関数が実行しますが、これは非同期に実行されます。したがって、checkBestaandeGebruikersnaamは即座に実行され、（未定義の値）が返され、あなたが予期していると思われるreturn false;が後で起こり無視されます。 Matteoは、非同期呼び出しからの応答を返すためのリンクを提案しました。これはチェックアウトする必要があります。問題を解決するための正しい道筋です。現代のJavaScriptでは、これをPromiseチェーンで処理することを提案します。

これを解決するもう1つの方法は、必要な条件が満たされたときにjavascriptからフォームを明示的に送信することです。 onreadystatechangeメソッド内から、非同期状態制御について心配する必要はありません。フォーム要素には、submitメソッドがあります。