使用 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