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

Question

我正在使用位于同一 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 的情况下再次显示错误？谢谢。

Answer 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>

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

Form is not displaying errors if ajax is used

javascript

php

forms

ajax

jquery