jquery - 表單驗證打破ajax後

我有一個註冊頁面，我使用Ajax發佈數據到一個php頁面。我有表單驗證如下：jquery - 表單驗證打破ajax後

firstname = $("#firstname").val(); 
if(firstname === '') { 
    $("#error").empty().append("Please enter a first name."); 
    $("#firstname").css("border-color", "#FF5454"); 
    return false; 
}

我提交的變量在Ajax崗位如下：

jQuery.ajax({ 
type: "POST", 
url: "/includes/register_process.php", 
data:'gender=' + gender + '&firstname=' + firstname + '&surname=' + surname 
+ '&studentno=' + studentno + '&email=' + email + '&password=' + password 
+ '&confirmpwd=' + confirmpwd, 
etc etc.

我想改變驗證上面的如下：

firstname = $("#firstname").val(); 
if(firstname === '') { 
    $("#error").empty().append("Please enter a first name."); 
    $("#firstname").css("border-color", "#FF5454"); 
    return false; 
} else { 
    $("#error").hide(); 
    $("#firstname").css("border-color", "#4DC742"); 
    return true; 
}

這似乎打破了Ajax的帖子，因爲它似乎沒有將數據發佈到php頁面。

任何人都可以給我一些提示，說明爲什麼這種改變會導致Ajax文章無法工作？我是使用Ajax的初學者。

謝謝。

編輯1：

<script> 
$(document).ready(function() { 
$("#FormSubmit").click(function (event) { 
event.preventDefault(); 

gender = $('#gender option:selected').val(); 
if (gender === 'null') { 
    $("#error").empty().append("Please select a gender."); 
    $("#gender").css("border-color", "#FF5454"); 
    return false; 
} else { 
    $("#error").hide(); 
    $("#gender").css("border-color", "#4DC742"); 
    return true; 
} 

firstname = $("#firstname").val(); 
if(firstname === '') { 
    $("#error").empty().append("Please enter a first name."); 
    $("#firstname").css("border-color", "#FF5454"); 
    return false; 
} 

surname = $("#surname").val(); 
if(surname === '') { 
    $("#error").empty().append("Please enter a surname."); 
    $("#surname").css("border-color", "#FF5454"); 
    return false; 
} 

studentno = $("#studentno").val(); 
if(studentno === '') { 
    $("#error").empty().append("Please enter a student number."); 
    $("#studentno").css("border-color", "#FF5454"); 
    return false; 
} 

email = $("#email").val(); 
if(email === '') { 
    $("#error").empty().append("Please enter an e-mail address."); 
    $("#email").css("border-color", "#FF5454"); 
    return false; 
} 

password = $("#password").val(); 
if(password === '') { 
    $("#error").empty().append("Please enter a password."); 
    $("#password").css("border-color", "#FF5454"); 
    return false; 
} 

if (password.length < 6) { 
    $(".sad-feedback").empty().append("Passwords must be at least 6 characters long. Please try again."); 
    $("#password").css("border-color", "#FF5454"); 
    return false; 
} 

confirmpwd = $("#confirmpwd").val(); 
if(confirmpwd === '') { 
    $("#error").empty().append("Please enter a password confirmation."); 
    $("#confirmpwd").css("border-color", "#FF5454"); 
    return false; 
} 

if(password != confirmpwd) { 
    $(".sad-feedback").empty().append("Your password and confirmation do not match. Please try again."); 
    $("#password").css("border-color", "#FF5454"); 
    $("#confirmpwd").css("border-color", "#FF5454"); 
    return false; 
} 

jQuery.ajax({ 
type: "POST", 
url: "/includes/register_process.php", 
data:'gender=' + gender + '&firstname=' + firstname + '&surname=' + surname + '&studentno=' + studentno + '&email=' + email + '&password=' + password + '&confirmpwd=' + confirmpwd, 
success:function(response){ 
    $("#hide").hide(); 
    $("#register-button").hide(); 
    $("#FormSubmit").hide(); 
    $("#error").hide(); 
    $("#success").append('Thank you for your registration. You can now sign in to your account.'); 
    $("#success-button").show(); 
}, 
error:function (xhr, ajaxOptions, thrownError){ 
    $("#error").empty().append(thrownError); 
} 
}); 

}); 
}); 
</script>

編輯2：

<script> 
$(document).ready(function() { 
$("#FormSubmit").click(function (e) { 
e.preventDefault(); 

var hasError = false; 

gender = $('#gender option:selected').val(); 
if (gender === 'null') { 
    $("#error").empty().append("Please select a gender."); 
    $("#gender").css("border-color", "#FF5454"); 
    hasError = true; 
} else { 
    $("#error").hide(); 
    $("#gender").css("border-color", "#4DC742"); 
    hasError = false; 
} 

firstname = $("#firstname").val(); 
if(firstname === '') { 
    $("#error").show(); 
    $("#error").empty().append("Please enter a first name."); 
    $("#firstname").css("border-color", "#FF5454"); 
    hasError = true; 
} else { 
    $("#error").hide(); 
    $("#firstname").css("border-color", "#4DC742"); 
    hasError = false; 
} 

surname = $("#surname").val(); 
if(surname === '') { 
    $("#error").show(); 
    $("#error").empty().append("Please enter a surname."); 
    $("#surname").css("border-color", "#FF5454"); 
    hasError = true; 
} else { 
    $("#error").hide(); 
    $("#surname").css("border-color", "#4DC742"); 
    hasError = false; 
} 

studentno = $("#studentno").val(); 
if(studentno === '') { 
    $("#error").show(); 
    $("#error").empty().append("Please enter a student number."); 
    $("#studentno").css("border-color", "#FF5454"); 
    hasError = true; 
} else { 
    $("#error").hide(); 
    $("#studentno").css("border-color", "#4DC742"); 
    hasError = false; 
} 

email = $("#email").val(); 
if(email === '') { 
    $("#error").show(); 
    $("#error").empty().append("Please enter an e-mail address."); 
    $("#email").css("border-color", "#FF5454"); 
    hasError = true; 
} else { 
    $("#error").hide(); 
    $("#email").css("border-color", "#4DC742"); 
    hasError = false; 
} 

password = $("#password").val(); 
if(password === '') { 
    $("#error").show(); 
    $("#error").empty().append("Please enter a password."); 
    $("#password").css("border-color", "#FF5454"); 
    hasError = true; 
} else { 
    $("#error").hide(); 
    $("#password").css("border-color", "#4DC742"); 
    hasError = false; 
} 

if (password.length < 6) { 
    $("#error").show(); 
    $(".sad-feedback").empty().append("Passwords must be at least 6 characters long. Please try again."); 
    $("#password").css("border-color", "#FF5454"); 
    hasError = true; 
} else { 
    $("#error").hide(); 
    $("#password").css("border-color", "#4DC742"); 
    hasError = false; 
} 

confirmpwd = $("#confirmpwd").val(); 
if(confirmpwd === '') { 
    $("#error").show(); 
    $("#error").empty().append("Please enter a password confirmation."); 
    $("#confirmpwd").css("border-color", "#FF5454"); 
    hasError = true; 
} else { 
    $("#error").hide(); 
    $("#confirmpwd").css("border-color", "#4DC742"); 
    hasError = false; 
} 

if(password != confirmpwd) { 
    $("#error").show(); 
    $(".sad-feedback").empty().append("Your password and confirmation do not match. Please try again."); 
    $("#password").css("border-color", "#FF5454"); 
    $("#confirmpwd").css("border-color", "#FF5454"); 
    hasError = true; 
} else { 
    $("#error").hide(); 
    $("#confirmpwd").css("border-color", "#4DC742"); 
    hasError = false; 
} 

if(hasError == false){ 
jQuery.ajax({ 
type: "POST", 
url: "http://test.student-portal.co.uk/includes/register_process.php", 
data:'gender=' + gender + '&firstname=' + firstname + '&surname=' + surname + '&studentno=' + studentno + '&email=' + email + '&password=' + password + '&confirmpwd=' + confirmpwd, 
success:function(response){ 
    $("#hide").hide(); 
    $("#register-button").hide(); 
    $("#FormSubmit").hide(); 
    $("#error").hide(); 
    $("#success").append('Thank you for your registration. You can now sign in to your account.'); 
    $("#success-button").show(); 
}, 
error:function (xhr, ajaxOptions, thrownError){ 
    $("#error").show(); 
    $("#error").empty().append(thrownError); 
} 
}); 
} 

return true; 

}); 
}); 
</script>

來源

2014-12-28 Sergiu Tripon

你檢查你的瀏覽器控制檯，看看是否有任何JS錯誤/消息？ – Sean

是的，根本沒有錯誤/消息。 –

我覺得這裏的問題是，你是從封閉在第一次檢查返回本身

event.preventDefault(); 
gender = $('#gender option:selected').val(); 
if (gender === 'null') { 
    $("#error").empty().append("Please select a gender."); 
    $("#gender").css("border-color", "#FF5454"); 
    return false;// no need to return 
} else { 
    $("#error").hide(); 
    $("#gender").css("border-color", "#4DC742"); 
    return true;// No need to return 
}

所以ajax調用永遠不會被調用。您應該改爲設置一個布爾值，可以將其稱爲hasError或其他東西，並根據您的驗證設置它的值。然後在關閉結束時進行ajax呼叫，或者不根據hasError的值進行呼叫

因此，請考慮執行此操作。

... 
event.preventDefault(); 
var hasError = false; 
$("#error").empty();// Empty out the errors container first 
gender = $('#gender option:selected').val(); 
if (gender === null) { 

    $("#error").append("Please select a gender.<br/>");// Changes here remove the empty 
    $("#gender").css("border-color", "#FF5454"); 
    hasError = true; 
} else { 

    $("#gender").css("border-color", "#4DC742"); 
    // EDIT : hasError = false; remove this line 
} ..... // All the other validation

然後在底部

if(hasError == false){ 
    $("#error").hide(); 
    // Make the ajax call 
} else { 
    $("#error").show(); 
} 

return true; // we handled the event

希望幫助

來源

2014-12-28 14:53:07 benjosantony

感謝您的。如果我刪除返回false;在驗證中，驗證不起作用，似乎它們都在同一時間被觸發。 –

根據您的代碼，同時觸發事件，並且您只有#error將錯誤消息放入，因此只會根據最後一個if else條件獲取最後一個錯誤（或隱藏#error） – benjosantony

已編輯我的發佈新代碼。我正在顯示並隱藏錯誤。當我使用返回false時;它似乎是爲了一個接一個的順序。另外，看着控制檯，現在看起來ajax請求只是在沒有跟隨驗證位的情況下執行，因爲它會引發來自php頁面的錯誤消息。 –

試試這個

$(document).on("submit", "form", function(event)//Try to set id of the form and use it #from_id instead of form 
{ 
    event.preventDefault(); 

    //now call your ajax 
    jQuery.ajax({ 
     type: "POST", 
     url: "/includes/register_process.php", 
     data:'gender=' + gender + '&firstname=' + firstname + '&surname=' + surname 
     + '&studentno=' + studentno + '&email=' + email + '&password=' + password 
     + '&confirmpwd=' + confirmpwd, 
     etc etc. 

});

來源

2014-12-28 14:37:38

檢查我編輯過的帖子。我已經在使用一個函數。 –

@Sergiu Tripon你正在使用點擊事件。使用提交事件和ID應該是形式ID –

一件事使用完整路徑，而不是相對路徑'/ includes/register_process.php' –

jquery - 表單驗證打破ajax後

回答

相關問題