jQuery-表單驗證中斷了ajax發布

Question

我有一個注冊頁面，並且正在使用Ajax將數據發布到php頁面。 我的表單驗證如下：

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>

Answer 1

嘗試這個

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

});

Answer 2

我認為這里的問題是您正在從第一張支票本身的關閉處返回

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

希望能有所幫助