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

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

我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请求没有机会在脚本的下一部分开始之前完成。

我的PHP文件不是问题。

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

我使用JQuery 1.7.1

来源

2014-01-15 user3191005

可能重复[jquery：return：false提交不工作 - 表单仍然提交]（http://stackoverflow.com/questions/18335408/jquery-return-false-on-submit-not-working-form-仍然提交） – Ryan

我看着你的代码，发现你没有做非同步：假在你的jQuery验证您的邮件。

asych:false //make request synchronous

非同步：这是现在必须执行，以控制进入下一语句来完成虚假陈述书。

来源

2014-01-15 16:58:20

-1

将preventDefault()添加到您的提交中，以便忽略原始提交行为。

那么，你的代码是这样的：

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

现在，您的默认提交行为被禁用，则可以通过AJAX调用您的文章形式。因此，一旦一切都验证，您只需简单的调用这个：

$.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()">

这样，如果你的函数返回false（换句话说验证错误），那么就不会提交表单。

来源

2014-01-15 16:59:09

目标是防止表单提交**有条件地**，而不是所有的时间。 – Quentin

好吧，我修改了代码以显示OP如何在需要时手动处理'post'事件。 –

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

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

取而代之，运行Ajax，测试该字段的change事件触发时输入的数据是否正确。将结果存储在某处（可能位于元素的数据属性中）。删除，一旦数据被再次改变结果（但把它放回去时，新的Ajax响应到达）

然后，您将有下列情形之一的：

字段标明为无效这样你就可以只需从您的正常验证程序返回false即可。

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

由于Ajax请求仍处于运行状态中，因此该字段标记为有效（且无效），在这种情况下，请正常提交并让服务器端验证发现问题。

来源

2014-01-15 17:01:16 Quentin

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

回答

相关问题