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)"。

表单不会等待ajax请求并立即发送数据。要阻止这种情况，您应该防止默认行为。

使用外部API验证失败时提交的Javascript表单

2 个答案: