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

希望有所帮助