隐藏错误文本直到单击框/按钮

Question

我希望在用户单击“名称”、“电子邮件”或“消息”框之前不显示 errName errEmail errMessage 文本。另外我想在按下提交按钮之前不显示 $result 。截至目前，即使用户没有与提交表单交互，它也只显示 errName、errEmail、errMessage 和警报。

<?php

error_reporting(E_ALL);

ini_set('display_errors', 1);

global $result;

if (isset($_POST["submit"])) {

    $errName ="";

    $errEmail ="";

    $errMessage ="";

    $result="";

    $name = $_POST['name'];

    $business = $_POST['business'];

    $email = $_POST['email'];

    $message = $_POST['message'];

    $from = '------';

    $to = '-----';

    $subject = 'Message from user on website';

    $body ="-------";

}

// Check if name has been entered

if (!isset($_POST) || !key_exists('name', $_POST) || !filter_var($_POST['name'])) {

    $errName = 'Please enter your name';

}

// Check if email has been entered and is valid

if (!isset($_POST) || !key_exists('email', $_POST) || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {

    $errEmail = 'Please enter a valid email address';

}

//Check if message has been entered

if (!isset($_POST) || !key_exists('message', $_POST) || !filter_var($_POST['message'])) {

    $errMessage = 'Please enter your message';

}

// If there are no errors, send the email

if (!isset($errName) && !isset($errEmail) && !isset($errMessage)) {

    $result .= '<br><div class="alert alert-success">Thank You! We will be in touch</div>';

} else {

    $result .= '<br><div class="alert alert-danger">Sorry there was an error sending your message. Please try again later.</div>';

}