如果使用 ajax，表单不显示错误答案

【问题标题】：Form is not displaying errors if ajax is used如果使用 ajax，表单不显示错误
【发布时间】：2022-01-24 03:13:34
【问题描述】：

我正在使用同一 index.php 文件中的 PHP 代码检查此表单是否有错误：

<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="POST">

                        <?php if(!empty($formErrors)){  ?>
                            <div id="errors">    
                                <?php 
                                    foreach($formErrors as $error)
                                        { echo '* ' . $error . '.<br/>';}
                                ?>
                            </div>
                       <?php } ?>

<input type="text" name="firstname">
<input type="submit" value="send">
</form>

PHP代码如下：

<?php 
    if($_SERVER['REQUEST_METHOD'] == 'POST'){

         $fname = $_POST['firstname'];
         $formErrors = array();

            if(strlen($fname) < 2 ){
                $formErrors[] = "First name must be longer than 1 character";
            }
}
?>

到目前为止一切正常，除了我想防止页面在提交表单时滚动到顶部。所以我用ajax来解决这个问题：

$("form").submit(function(e){
    e.preventDefault();
    $.ajax({
      type: $(this).attr("method"),
      url: $(this).attr("action"),
      data: $(this).serialize()
    });
  });

现在表单错误将不再显示，这不是我想要的。如何在不丢弃 ajax 的情况下再次显示错误？谢谢。

【问题讨论】：

您需要编写一些 JavaScript 从 php 读取错误数据（需要将错误数据回显为 JSON），然后将错误放入页面中的正确位置
你的 php 写得好像表单将使用默认表单提交，而不是 ajax 提交
我使用这个 ajax 代码只是为了防止滚动问题，除了显示错误之外，这就是我所需要的。

标签： javascript php jquery ajax forms

【解决方案1】：

虽然这不是最好的方法，但您可以从文件中回显 JSON 并在您的 ajax 函数中显示这些错误，如下所示：

前端（ajax）：

$("form").submit(function(e){
    e.preventDefault();
    $.ajax({
      type: $(this).attr("method"),
      url: $(this).attr("action"),
      data: $(this).serialize() + '&ajax=1',
      dataType:'json',
      success: function(res){
        if(res.success === false){
           $('#errors').html('<ul><li>' + res.errors.join('</li><li>') + '</li></ul>');
        }else{
           $('#errors').html('');   
        }
      } 
    });
  });

后端：

<?php 
    if($_SERVER['REQUEST_METHOD'] == 'POST'){

         $fname = $_POST['firstname'];
         $formErrors = array();

            if(strlen($fname) < 2 ){
                $formErrors[] = "First name must be longer than 1 character";
            }
        // add this additional check 
        if(($_POST['ajax'] ?? 'N/A') == '1'){
            echo json_encode(['success' => false,'errors' => $formErrors]);
            exit; // since we will only send the JSON back to the browser, not the entire form
        } 
}
?>

将您的表单代码更改为此（默认情况下始终添加errors div）：

<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="POST">
    <div id="errors"></div>
    <input type="text" name="firstname">
    <input type="submit" value="send">
</form>

【讨论】：

它现在可以工作了，但是空的 div 本身总是显示出来，所以我会想办法把它隐藏起来，直到出现错误，非常感谢你的努力和时间。
@MrShabana 太好了。您可以在 ajax 的 if-else 条件中切换它的可见性并使其默认隐藏。