使用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表單

回答

相關問題