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

Question

我有一个 HTML 表单，它在发布时会触发一个 JQuery 脚本来检查验证函数，然后再将数据发送到 ajax 调用以将数据插入到 mySQL 数据库中。

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

如果来自 ajax 调用的响应不是“成功”，我需要 email_error 变量返回 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

您可以在用户输入他们的电子邮件后立即使用.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 

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

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

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.');

      }
    },