Error messages are not displayed under the corresponding input fields. Use HTML, PHP

Question

If the user enters invalid data, how to immediately display the corresponding error message under the input field. For example, the user enters invalid data in the Name field and an error message immediately appears under the Name field. The same goes for the Email and Message fields. I'm using the next HTML and PHP code:

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

}
?>

I tried different articles.

Answer 1

Put the HTML code into an else block

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