Les messages d'erreur ne sont pas affichés sous les champs de saisie correspondants. Utiliser HTML, PHP

Question

Comment afficher immédiatement le message d'erreur correspondant sous le champ de saisie si l'utilisateur saisit des données invalides. Par exemple, l'utilisateur saisit des données non valides dans le champ Nom et un message d'erreur apparaît immédiatement sous le champ Nom. Il en va de même pour les champs Email et Message. J'utilise le code HTML et PHP suivant :

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

}
?>

J'ai essayé différents articles.

Answer 1

Placez le code HTML dans else blocs

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