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

Question

So i have my index.php that looks like this.所以我的 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>

And this is my process.php这是我的 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>';
    }
}
?>

My problem is that i don't know how to display the validation errors without refreshing the page, or not using the preventDefault() function, because without that, the page redirects to process.php and all the validation errors will show up there.我的问题是我不知道如何在不刷新页面或不使用 preventDefault() 函数的情况下显示验证错误，因为没有它，页面将重定向到 process.php 并且所有验证错误都会显示在那里。

Answer 1

You should create alert area inside your form like this:您应该在表单中创建警报区域，如下所示：

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

when you get the error from backend part you should make this alert area visible by toggling it in jquery and fill it with backend response errors当您从后端部分收到错误时，您应该通过在 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