JQuery验证没有捕获ajax响应并将变量设置为true

Question

我有一个HTML表单，当发布数据到ajax调用以将数据插入mySQL数据库之前，会发布一个JQuery脚本来检查验证函数。

它可以正常工作，除非它正在运行ajax检查以查看发布的电子邮件地址是否已存在于数据库中。

如果来自ajax调用的响应不是'success'，我需要email_error var返回true。我的代码：

function validate_add_relative() {
    var check_error = false;
    var email_error = false;
    var title = document.forms["add_relative_form"]["title"].value;
        if (title == null || title == "") {
             check_error =  true;
        }
    var first_name = document.forms["add_relative_form"]["first_name"].value;
        if (first_name == null || first_name == "") {
             check_error =  true;
        }
    var surname = document.forms["add_relative_form"]["surname"].value;
        if (surname == null || surname == "") {
             check_error =  true;
        }
    var phone = document.forms["add_relative_form"]["phone"].value;
        if (phone == null || phone == "") {
             check_error =  true;
        }
    var email = document.forms["add_relative_form"]["email"].value;
        if (email == null || email == "") {
             check_error =  true;
        }
    var address = document.forms["add_relative_form"]["address"].value;
        if (address == null || address == "") {
             check_error =  true;
        }
    var postData = $(this).serializeArray();
    $.ajax(
    {
        url : '<?php echo WEB_URL . 'controllers/ajax/check_relative_email.php'; ?>',
        type: "POST",
        data : postData,
        success:function(data, textStatus, jqXHR) {
          if(data == 'success') {
            email_error = false;
            return true;
          }
          else {
            alert('test');
            email_error = true;
            $('.relative_email_error').removeClass('hidden');
            $('.relative_email_error').html('Email is already in use. Please choose another.');

          }
        },
        error: function(jqXHR, textStatus, errorThrown)
        {
          $('.relative_email_error').removeClass('hidden');
          $('.relative_email_error').html('Error. Please try again later.');
          email_error = true;
        }
    });

    if (email_error == true) {
            alert("Please choose another email address, that one is already in use.");
            return false;
        }   
        if (check_error == true) {
            alert("Please ensure you fill in all mandatory fields.");
            return false;
        }
        if (email_error == false && check_error == false) {
            return true;
    }
}

$('.add_relative_form').submit(function(e) {
    e.preventDefault();
    if(validate_add_relative()) {
        var ajaxurl = '<?php echo WEB_URL; ?>controllers/ajax/add_relative.php',
        form_data = $('.add_relative_form').serialize();
        $.post(ajaxurl, form_data, function (response) {
            //location.reload();
        });
    }
});

运行上面的代码时，第一部分（表单验证）可以正常工作，它还会提供警报并在之后隐藏类。但它继续并且没有抓住在警报线之后将email_error设置为true的事实。所以它继续通过代码并通过最后一个ajax post controllers / ajax / add_relative.php添加条目

Answer 1

在出错后添加完整的函数并在该函数中编写代码

complete:function(data, textStatus, jqXHR) {
      if(data == 'success') {
        email_error = false;
        return true;
      }
      else {
        alert('test');
        email_error = true;
        $('.relative_email_error').removeClass('hidden');
        $('.relative_email_error').html('Email is already in use. Please choose another.');

      }
    },

Answer 2

JavaScript是异步的，因为它可以进行Ajax调用。因此，你的外在条件会被误导。尝试在AJAX响应中添加return语句以获得预期结果。

请尝试以下解决方案

function validate_add_relative() {
    var check_error = false;
    var email_error = false;
    var title = document.forms["add_relative_form"]["title"].value;
        if (title == null || title == "") {
            check_error =  true;
        }
    var first_name = document.forms["add_relative_form"]["first_name"].value;
        if (first_name == null || first_name == "") {
            check_error =  true;
        }
    var surname = document.forms["add_relative_form"]["surname"].value;
        if (surname == null || surname == "") {
            check_error =  true;
        }
    var phone = document.forms["add_relative_form"]["phone"].value;
        if (phone == null || phone == "") {
            check_error =  true;
        }
    var email = document.forms["add_relative_form"]["email"].value;
        if (email == null || email == "") {
            check_error =  true;
        }
    var address = document.forms["add_relative_form"]["address"].value;
        if (address == null || address == "") {
            check_error =  true;
        }
    if(check_error===false){
        var postData = $(this).serializeArray();
        $.ajax(
        {
            url : '<?php echo WEB_URL . 'controllers/ajax/check_relative_email.php'; ?>',
            type: "POST",
            data : postData,
            success:function(data, textStatus, jqXHR) {
            if(data == 'success') {
                return true;
            }
            else {
                alert('test');
                return false;
                $('.relative_email_error').removeClass('hidden');
                $('.relative_email_error').html('Email is already in use. Please choose another.');

            }
            },
            error: function(jqXHR, textStatus, errorThrown)
            {
                $('.relative_email_error').removeClass('hidden');
                $('.relative_email_error').html('Error. Please try again later.');
                return false;
            }
        });
    }
    else{
        return false;
    }
}

$('.add_relative_form').submit(function(e) {
    e.preventDefault();
    if(validate_add_relative()) {
        var ajaxurl = '<?php echo WEB_URL; ?>controllers/ajax/add_relative.php',
        form_data = $('.add_relative_form').serialize();
        $.post(ajaxurl, form_data, function (response) {
            //location.reload();
        });
    }
});

<强>更新

更改以下代码：

   if(data == 'success') {
            return true;
        }
        else {
            alert('test');
            return false;
            $('.relative_email_error').removeClass('hidden');
            $('.relative_email_error').html('Email is already in use. Please choose another.');

        }

要

   if(data == 'success') {
        return true;
    }
    else {
        alert('test');

        $('.relative_email_error').removeClass('hidden');
        $('.relative_email_error').html('Email is already in use. Please choose another.');
           return false;
    }

Answer 3

您可以在用户输入电子邮件后立即使用.blur()检查电子邮件是否已存在，您发送AJAX电话以检查电子邮件是否存在并禁用提交按钮并显示正确消息给用户。

<强>表格

<form action="" name="add_relative_form" class="add_relative_form">
<input type="text" name="title">
<input type="text" name="first_name">
<input type="text" name="surname">
<input type="text" name="phone">
<input type="text" id="email" name="email"> <!-- give email an id -->
<input type="text" name="address">
<input type="submit" id="sub" value="Sub"> <!-- give submit an id -->

<强>的Javascript

function validate_add_relative() {
    var check_error = false;
    var email_error = false;
    var title = document.forms["add_relative_form"]["title"].value;
    if (title == null || title == "") {
        check_error = true;
    }
    var first_name = document.forms["add_relative_form"]["first_name"].value;
    if (first_name == null || first_name == "") {
        check_error = true;
    }
    var surname = document.forms["add_relative_form"]["surname"].value;
    if (surname == null || surname == "") {
        check_error = true;
    }
    var phone = document.forms["add_relative_form"]["phone"].value;
    if (phone == null || phone == "") {
        check_error = true;
    }
    var email = document.forms["add_relative_form"]["email"].value;
    if (email == null || email == "") {
        check_error = true;
    }
    var address = document.forms["add_relative_form"]["address"].value;
    if (address == null || address == "") {
        check_error = true;
    }

    if (email_error == true) {
        alert("Please choose another email address, that one is already in use.");
        return false;
    }
    if (check_error == true) {
        alert("Please ensure you fill in all mandatory fields.");
        return false;
    }
    if (email_error == false && check_error == false) {
        return true;
    }
}

$('.add_relative_form').submit(function (e) {
    e.preventDefault();
    if (validate_add_relative()) {
        var ajaxurl = '<?php echo WEB_URL; ?>controllers/ajax/add_relative.php',
            form_data = $('.add_relative_form').serialize();
        $.post(ajaxurl, form_data, function (response) {
            //location.reload();
            console.log(response)
        });
    }
});

$('#email').on('blur', function () {
    $.ajax({
        url: '<?php echo WEB_URL . 'controllers/ajax/check_relative_email.php'; ?>',
        type: "POST",
        data: {email: $(this).val()},
        success: function (data, textStatus, jqXHR) {
            if (data == 'success') {
                $('#sub').prop('disabled', false);
            }
            else {
                $('.relative_email_error').show();
                $('.relative_email_error').html('Email is already in use. Please choose another.');
                $('#sub').prop('disabled', true);
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            $('.relative_email_error').removeClass('hidden');
            $('.relative_email_error').html('Error. Please try again later.');
        }
    });
})

然后在您的PHP收到来自帖子的电子邮件

<?php

    $email = $_POST['email'];

    // your SQL code here