AJAX 表单，通过 JSON 响应进行 php 验证答案

【问题标题】：AJAX Form, with php validation through JSON responseAJAX 表单，通过 JSON 响应进行 php 验证
【发布时间】：2015-04-06 17:51:12
【问题描述】：

我有一个表单，其中包含通过 PHP 进行检查的必填字段。它以 JSON 格式生成响应并通过 ajax 响应传递它，格式如下对象{first_name：true，e_mail：false，phone_number：true，message：true}

表单中的输入字段的 ID 等于对象数组的键。

我想要实现的是遍历这个对象数组，确定缺少哪些字段并在此处添加错误消息，这就是我的做法。

                if (fields_list) {
                console.log(fields_list);
                for (var key in fields_list) {
                    var item = fields_list[key];
                    if (item === true) {
                        $('#' + key).after('<div class=' + key + '>' + data.field_msg + '</div>');
                    } else {
                        $("div" + '#' + key).remove();
                    };
                }; // Loop through fields_list
            }; // if field list exist

当进行第一次表单提交时，它会给出我期望的结果，它会在输入字段本身之后添加带有错误消息和输入字段 id 的 div 容器。如果数据已输入字段，则在第二次提交后出现问题，我希望删除输入字段后的 div 容器。相反，它继续在字段之后附加 div 容器，该字段仍然在没有数据的情况下提交，但不会将额外的 div 容器附加到具有数据的字段。如何解决这个问题？

提前谢谢你。

【问题讨论】：

标签： javascript ajax json

【解决方案1】：

您是否考虑过在表单的顶部/底部放置 1 个错误 div？这就是我们在项目中使用的。如果您有兴趣尝试它，您不必每次都附加一个 div，而是有一个带有“错误”类的 div 或已经存在但用 CSS 隐藏的东西。当您收到响应时，在您的 JSON 中添加一个标志“错误”，以便您知道是否有错误，如果有，则显示该 div。然后，您可以在该 div 中添加带有 ul 和 li 的简单错误列表，并在每次提交时清除它，以便在需要第二次时在其中生成新列表。

【讨论】：

我想创建一个指向每个字段的指针，该字段已被要求且尚未成为字段。我现在如何通过切换类来处理一个字段。但这不是我想要达到的目标。
那么这将是给您的错误字段一个特定 ID 的情况，您可以在创建新字段之前检查其是否存在。 errors-firstName 例如，与您的字段键对应的内容。始终检查是否存在，如果有，请更新它而不是添加新的。
如何检查它是否存在？
可以简单到 if($("#error-" + name).length == 0) { //它不存在 }.

【解决方案2】：

消息 div 没有 ID。因此，您的第二个选择器不匹配。

如果您想与现有代码保持接近，最简单的解决方案是也给这些 div 一个 id。例如：

for (var key in fields_list) {
   $('#message' + key).remove(); //clear old messages
   var item = fields_list[key];
   if (item === true) {
       // add message div with unique id
       $('#' + key).after('<div class=' + key + ' id="message' + key + '">' + data.field_msg + '</div>');
    }
}; // Loop through fields_list

【讨论】：

我错误地放置了 class= 而不是 id " $('#' + key).after('
' + data.field_msg + '
');" 因为我要求删除带有 id 而不是类的 div。现在它会删除不需要的消息，但如果数据仍然丢失，则会在每次提交时继续在输入上附加错误数据。我需要将其附加一次而不是多次，以便它只创建一个新的 div 标签，而不是在每次提交时一遍又一遍地添加它们
如果在添加新的 div 之前删除所有错误 div，则每个字段应仅显示一个。如我的代码示例所示，我建议将 .remove() 调用从 else 案例中取出并为所有字段执行它

【解决方案3】：

if (fields_list) {
    for (var key in fields_list) {
        var item = fields_list[key];
        $("div" + '#' + key).remove(); // clear old messages
        if (item === true) {
            $('#' + key).after('<div id=' + key + '>' + data.field_msg + '</div>');
        } else {
            $("div" + '#' + key).remove();
        };
    }; // Loop through fields_list
}; // if field list exist

cypherabe 你真的帮了大忙。

【讨论】：