錯誤訊息不會顯示在對應的輸入欄位下。使用 HTML、PHP

Question

如果使用者輸入無效數據，如何立即在輸入欄位下顯示相應的錯誤訊息。 例如，使用者在「名稱」欄位中輸​​入無效數據，錯誤訊息立即出現在名稱欄位下。 「電子郵件」和「訊息」欄位也是如此。 我正在使用下一個 HTML 和 PHP 程式碼：

<form method="POST" action="send-email.php">
  
  <input type="text" name="name" id="name" placeholder="Name*" required>
  <div class="error"><?php echo $nameErr ?></div>

  <input type="email" name="email" id="email" placeholder="Email*" required>
  <div class="error"><?php echo $emailErr ?></div>

  <textarea name="message" id="message" placeholder="Your Message*" required></textarea>
  <div class="error"><?php echo $messErr ?></div>

  <button type="submit" name="submit" id="submit" class="button">Start</button>
  
</form>

<?php
require "vendor/autoload.php";

use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\SMTP;

$nameSanitized = filter_var(trim($_POST['name']), FILTER_SANITIZE_STRING);
$emailSanitized = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
$messageSanitized = filter_var(trim($_POST['message']), FILTER_SANITIZE_STRING);
$subject = "new message ";

$valid = true;
$emailErr = "";
$nameErr = "";
$messErr = "";

if (!preg_match('/^[\p{Latin}\p{Cyrillic} ]*$/u', $nameSanitized)) {
    $nameErr = "Only Latin and Cyrillic letters and white space allowed in the name field.\n";
    $valid = false;
}

if (empty($nameSanitized) || empty($messageSanitized)) {
    $messErr = "Name and message are required.\n";
    $valid = false;
}

if (!preg_match("/^[a-zA-Z0-9_]+@[a-zA-Z0-9_]+\.[a-zA-Z0-9_]+$/", $emailSanitized)) {
    $emailErr = "Email should contain only letters, numbers, and underscores.\n";
    $valid = false;
}

//only send if all validations passed:
if ($valid == true) {
    try {
        $mail = new PHPMailer(true);

        $mail->SMTPDebug = SMTP::DEBUG_SERVER;

        $mail->isSMTP();
        $mail->SMTPAuth = true;

        $mail->Host = "smtp.gmail.com";
        $mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS;
        $mail->Port = 587;

        require_once 'config.php';
        $mail->Username = SMTP_USERNAME;
        $mail->Password = SMTP_PASSWORD;

        $mail->setFrom($emailSanitized, $nameSanitized);
        $mail->addAddress("myemail@gmail.com", "myemail");

        $mail->Subject = $subject;
        $mail->Body =  "Name: $nameSanitized\nEmail: $emailSanitized\n\n$messageSanitized";
        $mail->send();

        header("Location: sent.html");
    } catch (Exception $e) {
        echo 'Message could not be sent. Mailer Error: ', $mail->ErrorInfo;
    }
} else {
 
    echo $emailErr;
    echo $nameErr;
    echo $messErr;

}
?>

我嘗試了不同的文章。

Answer 1

將 HTML 程式碼放入 else 區塊中

} else { ?>
 
<form method="POST" action="send-email.php">
  
  <input type="text" name="name" id="name" placeholder="Name*" required>
  <div class="error"><?php echo $nameErr ?></div>

  <input type="email" name="email" id="email" placeholder="Email*" required>
  <div class="error"><?php echo $emailErr ?></div>

  <textarea name="message" id="message" placeholder="Your Message*" required></textarea>
  <div class="error"><?php echo $messErr ?></div>

  <button type="submit" name="submit" id="submit" class="button">Start</button>
  
</form>

<?php }