使用外部API驗證失敗時提交的Javascript表單

Question

我正在嘗試通過使用外部API進行電子郵件驗證來驗證表單。

這是我的表單標簽：

<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返回什么，都會提交表單。

我想念什么？

Answer 1

return false將阻止表單被提交。

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

在您的then方法中，您可以調用$(".form-horizontal").submit(); 這樣就可以在ajax調用成功之后提交表單。

Answer 2

validateForm函數應如下所示：

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

而不是onsubmit="return validateForm()"使用onsubmit="return validateForm(event)" 。

Form不等待ajax請求並立即發送數據。 要停止此操作，您應該防止默認行為。