外部APIによる検証が失敗した場合にJavascriptフォームが送信されない

Question

電子メールの検証に外部APIを使用してフォームを検証しようとしています。ここで

は私のformタグである：

<form class="form-horizontal" role="form" onsubmit="return validateForm()" method="post"> 

これは私のJSコードです：

function validateForm() { 
    var email = $("#email").val(); 
    $.ajax({ 
     url: "https://bpi.briteverify.com/emails.json?address=" + $("#email").val() + "&apikey=XXXXXXXXXXX", 
     dataType: "jsonp" 
    }).then(function(data) { 
     console.log('BrightVerify result : ' + data.status); 
     if (data.status == 'invalid') { 
      document.getElementById("checkResult").innerHTML = 'Email address is invalid!'; 
      console.log('Setting result to false.'); 
      return false; 
     } 
    }); 
} 

何があってAPIに戻り、フォームが送信されません。

私には何が欠けていますか？

function validateForm(event) { 
    event.preventDefault(); 
    // ... 
} 

、代わりにonsubmit="return validateForm()"使用onsubmit="return validateForm(event)"の：

Answer 1

return falseフォームが送信されないようにします。あなたのthen方法で

<form class="form-horizontal" role="form" onsubmit="event.preventDefault(); validateForm(); return false;" method="post"> 

AJAX呼び出しが成功した後にフォームが送信されるように、あなたは$(".form-horizontal").submit();を呼び出すことができます。

Answer 2

validateForm機能は、次のようになります必要があります。

フォームはajaxリクエストを待ってすぐにデータを送信しません。これを止めるには、デフォルトの動作を防ぐ必要があります。