使用 AJAX 提交后如何将验证错误回显到我的表单中？

Question

所以我的 index.php 看起来像这样。

    <head>
        <script>
            $(document).ready(function() {
                $('#register').submit(function(event) {
                    var username = $("input[name='username']").val();
                    var email = $("input[name='email']").val();
                    var pwd1 = $("input[name='pwd1']").val();
                    var pwd2 = $("input[name='pwd2']").val();
                    $('.register-status').load('process.php',{
                        username: username,
                        email: email,
                        pwd1: pwd1,
                        pwd2: pwd2
                    });
                     event.preventDefault();
                });
            });
        </script>
    </head>
    <body style="background-color:#a2a2a2" class="">
        <div class="container col-3 bg-light mt-5 p-3 rounded">
            <form id="register" action="process.php" method="post">
                <div class="row d-flex justify-content-center">
                    <input class="border rounded m-2 text-center" type="text" name="username" placeholder="Username">
                </div>
                <div class="row d-flex justify-content-center">
                    <input class="border rounded m-2 text-center" type="text" name="email" placeholder="E-mail">
                </div>
                <div class="row d-flex justify-content-center">
                    <input class="border rounded m-2 text-center" type="text" name="pwd1" placeholder="Password">
                </div>
                <div class="row d-flex justify-content-center">
                    <input class="border rounded m-2 text-center" type="text" name="pwd2" placeholder="Confirm password">
                </div>
                <div class="row d-flex justify-content-center">
                    <button class="btn btn-warning mt-2" type="submit" name="register">Registration</button>
                </div>
            </form>
            <p class="register-status"></p>
        </div>
    </body>

这是我的 process.php

<?php
if (isset($_POST['register'])) {
    if (empty($_POST['username'])) {
        echo '<span>Please enter a username</span>';
    }
    if (empty($_POST['email'])) {
        echo '<span>Please enter an E-mail</span>';
    }
    if (empty($_POST['pwd1'])) {
        echo '<span>Please enter a password</span>';
    }
    if (empty($_POST['pwd2']) && !empty($_POST['pwd1'])) {
        echo '<span>Please confirm your password</span>';
    }
    elseif (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
        echo '<span>Please enter a valid E-mail address</span>';
    }
}
?>

我的问题是我不知道如何在不刷新页面或不使用 preventDefault() 函数的情况下显示验证错误，因为没有它，页面将重定向到 process.php 并且所有验证错误都会显示在那里。

Answer 1

您应该在表单中创建警报区域，如下所示：

<div class="alert alert-danger" role="alert" style="display: none">
   <!-- errors gonna be here -->
   <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
   </button>
</div>

当您从后端部分收到错误时，您应该通过在 jquery 中切换它并用后端响应错误填充它来使此警报区域可见

使用 AJAX 提交后如何将验证错误回显到我的表单中？

问题描述

1 个解决方案

解决方案1
0 2019-12-07 14:12:26

使用 AJAX 提交后如何将验证错误回显到我的表单中？

问题描述

1 个解决方案

解决方案1 0 2019-12-07 14:12:26

解决方案1
0 2019-12-07 14:12:26