错误消息不会显示在相应的输入字段下。使用 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 }