表单提交成功后的消息显示

Question

我正在使用表单验证。表单验证工作正常。但是问题是在表单提交后，成功消息div必须显示并重置表单字段。 我已经尝试过了，但是没有达到结果。

  `if ($nameErr == '' && $emailErr == '' && $pwdErr == '' && $phErr == '' && $genderErr == '') {
         echo '<div class="msg_success" style="visibility: visible!important;">'.'</div>';

          }`

我是PHP的新手。谁能建议我在这里做错了什么，并指出正确的方向。下面是我的代码。

PHP代码

 $nameErr = '';
 $emailErr = '';
 $pwdErr  = '';
 $phErr = '';
 $genderErr = '';


 $user_name = '';
 $user_email = '';
 $user_password = '';
 $user_phone = '';
 $user_gender = '';

function test_input($data) {
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;
}


if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if (empty($_POST["user_name"])) {
        $nameErr = "Name is required";
    } else {
        $user_name = test_input($_POST["user_name"]);
        if (!preg_match("/^[a-zA-Z ]*$/",$user_name)) {
            $nameErr = "Only letters and white space allowed"; 
        }
    }

    if (empty($_POST["user_email"])) {
        $emailErr = "Email is required";
    } else {
        $user_email = test_input($_POST["user_email"]);

        if (!filter_var($user_email, FILTER_VALIDATE_EMAIL)) {
            $emailErr = "Invalid email format"; 
        }
    }

    if (empty($_POST["user_password"])) {
        $pwdErr = "Password is required";
    } else {
        $user_password = test_input($_POST["user_password"]);

        if (!preg_match("/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/", $user_password)) {
            $pwdErr = "Use atleast one uppercase lowercase and digit"; 
        }
    }

    if (empty($_POST["user_phone"])) {
        $phErr = "Phone number is required";
    } else {
        $user_phone = test_input($_POST["user_phone"]);
        if (!preg_match("/^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/",$user_phone)) {
            $phErr = "Invalid phone number"; 
        }
    }

    if (empty($_POST["user_gender"])) {
        $genderErr = "Gender is required";
    } else{
        $user_gender = test_input($_POST["user_gender"]);
        if ($user_gender == "Male"){
            $Mchecked = "checked";
        }
        else if ($user_gender == "Female"){
            $Fchecked = "checked";
        }

    }

    // if ($nameErr == '' && $emailErr == '' && $pwdErr == '' && $phErr == '' && $genderErr == '') {
    //  echo '<div class="msg_success" style="visibility: visible!important;">'.'</div>';

    // }

}
?>

HTML代码

<div class="at_wrapper">
<div class="at_inner">
    <div class="registerorm">
        <form method="POST" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" novalidate autocomplete="off">
            <div class="fields">
                <label>Name</label>
                <input type="text" name="user_name" value="">
            </div>
                <span class="error"><?php echo $nameErr;?></span>
            <div class="fields">
                <label>Email</label>
                <input type="email" name="user_email" value="">
            </div>
            <span class="error"><?php echo $emailErr;?></span>
            <div class="fields">
                <label>Password</label>
                <input type="password" name="user_password" value="">
            </div>
            <span class="error"><?php echo $pwdErr;?></span>
            <div class="fields">
                <label>Phone Number</label>
                <input type="number" name="user_phone" value="">
            </div>
            <span class="error"><?php echo $phErr;?></span>
            <div class="fields">
                <label>Gender</label>
                <span class="fgender">
                    <input type="radio" name="user_gender" value="Male">Male
                    <input type="radio" name="user_gender" value="Female">Female
                </span>
            </div>
            <span class="error"><?php echo $genderErr;?></span>
            <div class="btn">
                <input type="submit" name="submit" value="Send" class="btn_submit">
            </div>
            <div class="msg_success">
                <p>Successfully Sent</p>
            </div>
        </form>
    </div>
</div>

CSS

.msg_success {
display: flex;
justify-content: center;
border-radius: 10px;
visibility: hidden;
background: #9ce29c;
animation: cssAnimation 5s forwards;
animation-fill-mode: forwards;
}
  .msg_success p {
      font-size: 24px;
      font-weight: 800;
     letter-spacing: 4px;
       color: green;
   }
  .error {
      display: flex;
       justify-content: flex-end;
      font-size: 12px;
      font-weight: 500;
      font-family: sans-serif;
     color: red;
  }

   @keyframes cssAnimation {
        0%   {opacity: 1;}
        90%  {opacity: 1;}
       100% {opacity: 0;}
    }