使用JQuery、AJAX和PHP验证HTML表单

我使用JQUERY从客户端验证注册表单。我还使用一个带有PHP文件的AJAX请求来检查并确保该电子邮件是有效的电子邮件，并且没有被其他用户使用。除了表单似乎在AJAX成功完成之前提交之外，一切都很好。这是一个普遍的问题吗？我如何防止这种情况

我的JQUERY/AJAX：

<script>
$(document).ready(function() {

    $(".form-row-error").hide();

    $("#signup").submit(function() {

        $(".form-row-error").hide();
        var error= false;

        var dataString = $(this).serialize();

        var fname= $("#fname").val().trim();
        var lname= $("#lname").val().trim();
        var email= $("#email").val().trim();
        var username= $("#username").val().trim();
        var password1= $("#password1").val().trim();
        var password2= $("#password2").val().trim();            

        if (fname == 0) {
            $("#field1").show();
            error= true;
        }

        if (lname == 0) {
            $("#field2").show();
            error= true;
        }

        if (email == 0) {
            $("#field3").show();
            error= true;
        }
        else {
            // Run AJAX email validation and check to see if the email 
is already taken
            $.ajax({  
                type: "POST",  
                url: "checkemail.php",  
                data: dataString,
                success: function(data) {
                    if (data == 'invalid') {
                        alert('invalid email');
                        error= true;
                    }
                    else if (data == 'taken') {
                        alert('email taken');
                        error= true;
                    }
                }
            });
        }

        if (username == 0) {
            $("#field4").show();
            error= true;
        }

        // Checks to see if the username is already in use, if so show the 
field4 secondary error
        if (username != 0) {
            // Script to check the username against the database and 
shows the error if applicable
            // $("#field4-secondary").show();
            // error= true;
        }

        if (password1 == 0) {
            $("#field5").show();
            error= true;
        }

        if (password2 == 0) {
            $("#field6").show();
            error= true;
        }

        // Checks and makes sure both password fields have been filled
        if (password1 != 0 && password2 != 0) {
            // Checks to see if the passwords match, if not show the  
field5 secondary error and reset the password fields
            if (password1 != password2) {
                $("#field5-secondary").show();
                $("#password1").val("");
                $("#password2").val("");
                error= true;
            }
        }

        if (error == true) {
            return false;
        }

    });

});
</script>

一些背景：

只有在我将另一个字段留空以及电子邮件出错时，AJAX成功警报才有机会出现。这让我相信AJAX请求在脚本的下一部分开始之前没有机会完成

我的PHP文件不是问题所在

我对使用JSON不感兴趣，我发现返回简单文本更容易

---

我正在使用JQuery 1.7.1

我查看了您的代码，发现您在验证电子邮件时没有在JQuery中执行异步：false

asych:false //make request synchronous

asynch:false表示现在执行的语句必须完成才能控制转到下一个语句。

将preventDefault添加到submit中，使其忽略原始提交行为

那么你的代码在哪里呢

 $("#signup").submit(function(event){
      event.preventDefault(); // <-- add this

或者，您可以重新构造代码，并将所有验证放在函数中。 像这样：

function validateFields() {
  if (fname==0){return false;}
  //place all your validation including ajax here
  return true;
}

然后在您的表单中，只需执行以下操作：

<form onSubmit="return validateFields()">

---

这样，如果您的函数返回false，即验证错误，那么它将不会提交表单。

您试图使函数的结果依赖于您从该函数发出的Ajax调用的返回值

Ajax是异步的，所以您可以使用它

相反，当该字段的更改事件触发时，运行Ajax测试输入的数据是否正常。将结果存储在元素的某个数据属性中。数据再次更改后立即删除该结果，但在新Ajax响应到达时将其放回原处

然后，您将遇到以下情况之一：

字段标记为无效，以便您可以从正常验证例程返回false

字段标记为有效且有效，以便您可以返回true并正常提交

---

字段标记为有效且无效，因为Ajax请求仍在进行中。在这种情况下，请正常提交，并让服务器端验证发现问题。

目标的可能重复是防止表单有条件提交，而不是一直提交。确定，我修改了代码，向OP展示了如何在需要时手动处理post事件。

<form onSubmit="return validateFields()">