Question

我正在使用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

Answer 1

您正在尝试使函数的结果取决于您从该函数调用的Ajax调用的返回值。

Ajax是异步的，所以你cannot do that。

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

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

字段标记为无效，因此您只能从正常的验证例程返回false。

字段标记为有效（并且有效），因此您可以返回true并正常提交。

字段标记为有效（且无效），因为Ajax请求仍处于运行状态，在这种情况下，正常提交并让您的服务器端验证能够解决问题。

Answer 2

我查看了你的代码，发现你在验证你的电子邮件时，你的jquery中没有asynch：false。

asych:false //make request synchronous

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

Answer 3

将<{1}}添加到您的提交中，以便忽略原始提交行为。

所以你的代码在哪里：

preventDefault()

现在您的默认提交行为已停用，您可以通过ajax调用您的帖子表单。因此，一旦所有内容都经过验证，您只需简单地调用它：

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

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

$.post( 'myurl.php' , $this.serialize() ,  function( data ) {
       //return data once post (submit) is complete

    });

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

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

这样，如果你的函数返回<form onSubmit="return validateFields()">（换句话说是验证错误），那么它就不会提交表单。

使用JQuery，AJAX和PHP来验证HTML表单

3 个答案: