联系人表单-将变量从PHP传递到jQuery

[我怀疑眼前的问题与php数组如何传递给jQuery有关，如果不是这样，我为这个误导性的标题道歉]

下面的联系人表单是有效的-除了我提交表单数据时，有时一个字段总是保持红色边框，表示缺少输入，即使它实际上有数据

详细说明：我有一个只适用于php的解决方案，但在提交时会导致页面重新加载，这是我希望避免的。经过一些研究，我似乎需要php/jQuery/ajax来异步执行这些操作，并保持在同一个站点上

期望的行为： 因此，有三个必填输入字段，分别是name、email和message，如果其中任何一个字段被遗漏，它将收到一个红色边框，并且不会发送任何电子邮件

实际行为： 例如，如果仅填写并提交姓名和邮件，则空电子邮件字段将显示为红色。 但是，如果提供了有效的电子邮件，则第二次提交操作不会删除电子邮件字段周围的红色边框

我知道javascript和friends是一种客户端语言，PHP在服务器端得到处理。提交表单后，.ajax函数接受序列化的表单值，使用“POST”将其填充到php脚本中，并等待服务器在内部调用我们。完成

这就是我迷路的地方——如何在jQuery中使用php数组

例如，无论如何，这条线永远不会到达：

console.log("All fields filled and valid"); 

index.html： process.php

---

看起来，如果所有的验证都通过了php脚本，那么数据['errors']就永远不会被定义。这可能会导致抛出一个错误，您可以在编写以下代码时在javascript的浏览器控制台中看到该错误：

if (data.errors.name) 

在javascript中，data.errors将计算为undefined，当您尝试访问未定义的属性（如data.errors.name）时，它将抛出一个错误并停止脚本

要解决这个问题，您可能只需要在php脚本中定义错误，尽管我不能100%确定JSON方法不会遗漏空数组。。。。尝试在php脚本中执行此操作：

if(!empty($errors)) 
{
    // if there are items in our errors array, return those errors
    $data['input_valid'] = false;
    $data['errors']  = $errors;
} 
else 
{
    // If there are no errors process our form, then return a message
    $data['input_valid'] = true;
    $data['errors'] = $errors; // even though it is empty
    // etc

编辑：

我不知道它是否适用于您的jquery版本，但万一不行，请将以下代码放在标题中：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

---

添加event.preventDefault；作为$'contactForm.submitfunctionevent中的第一行{首先……这将阻止页面重新加载。然后，如果仍然存在问题，请更新您的问题。谢谢；理想情况下，我希望代码保持原样，并找出为什么我没有在verify.js中找到成功部分，即以ifdata.input\u valid==true开头的部分……您的分析是合理的；添加$data行[“错误”]=$errors；但没有帮助。我将尝试单独定义错误字符串，看看它是否有效。谢谢！你知道如何在浏览器控制台中查看错误吗？如果我是对的，你会看到一个错误，例如无法访问未定义的属性名和对脚本特定行的引用。我使用firefox->F12->console。没有未定义我将仔细研究php脚本对xdebug的作用，并报告。

if (data.errors.name) 

if(!empty($errors)) 
{
    // if there are items in our errors array, return those errors
    $data['input_valid'] = false;
    $data['errors']  = $errors;
} 
else 
{
    // If there are no errors process our form, then return a message
    $data['input_valid'] = true;
    $data['errors'] = $errors; // even though it is empty
    // etc

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

$(document).ready(function()  {
    $('#contactForm').submit(function(event)  {
        $.ajax({
            type: 'POST',
            url: 'process.php',
            data: $('#contactForm').serialize(),
            dataType: 'json',
            encode: true
        })
        .done(function(data)  {
            console.log(data);
            if(data.input_valid == true) {
                console.log("All fields filled and valid");
                // If the function is a success remove error classes from all fields
                // you can either place the below code above the alert so that it happens
                // before you get the success message, or after.
                $('#name').removeClass('input-error');
                $('#email').removeClass('input-error');
                $('#message').removeClass('input-error');
                alert('success');
            } else {
                if (data.errors.name)  {
                    console.log("Name missing");
                    $('#name').addClass('input-error');
                } else {
                    $('#name').removeClass('input-error');
                }
                if (data.errors.email)  {
                    console.log("Email missing or invalid");
                    $('#email').addClass('input-error');
                } else {
                    $('#email').removeClass('input-error');
                }
                if (data.errors.message) {
                    console.log("Message missing");
                    $('#message').addClass('input-error');
                } else {
                    $('#message').removeClass('input-error');
                }
            }
        });
        event.preventDefault();
    });
});