如何在字段旁边显示验证错误？

Question

我正在尝试为 wordpress 网站创建一个简单的表单。我创建了一个完整的表格，它工作正常。代码如下。

<?php
//Setup an empty array.
$errors = array(); 
    if($_POST["submit"]) {
    $to = "myemail@gmail.com";
    $subject = "New reservations request";
    $hotel = $_POST["hotel_url"];
    $sender = $_POST["sendername"];
    $senderEmail = $_POST["senderEmail"];

    //Check the name and make sure that it isn't a blank/empty string.
    if(strlen(trim($sender)) === 0){
        //Blank string, add error to $errors array.
        $errors[] = "You must enter your name!";
    }

    //Make sure that the email address is valid.
    if(!filter_var($senderEmail, FILTER_VALIDATE_EMAIL)) {
        //$email is not a valid email. Add error to $errors array.
        $errors[] = "That is not a valid email address!";
    }

    if(!empty($errors)){ 
        echo '<h1 style="color: red">Error(s)!</h1>';
        foreach($errors as $errorMessage){
            echo $errorMessage . '<br>';
        }
    } 

    if(empty($errors)){

        $mailBody = "<table border='1'>
                       <tr>
                        <th>No</td>
                        <th>Item</td>
                        <th>Description</td>
                       </tr>
                       <tr>
                        <td>01</td>
                        <td>Hotel</td>
                        <td>$hotel</td>
                       </tr>
                       <tr>
                        <td>02</td>
                        <td>Name</td>
                        <td>$sender</td>
                       </tr>
                       <tr>
                        <td>03</td>
                        <td>E-Mail</td>
                        <td>$senderEmail</td>
                       </tr>
                    </table>";

            $headers = array('From: '.$_POST['sendername'].' <'.$_POST['senderEmail'].'>');

            $mail_sent = wp_mail( $to, $subject, $mailBody, $headers ); 
        }
    }

    if ($mail_sent) {
?>
    <p>Request sent</p>

<?php 
} else {
?>

<form id="" name="" action="<?php echo get_permalink(); ?>" method="post">
<input type="hidden" name="hotel_url" value="<?php echo get_permalink();?>" />

    <div class="section-heading"><h6>Your Details</h6></div>    
    <div class="label-input-wrapper">
        <div class="form-label">Name</div><div class="form-input"><input type="text" name="sendername"/></div>
    </div>

    <div class="label-input-wrapper">
        <div class="form-label">E-Mail</div><div class="form-input"><input type="email" name="senderEmail" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" required /></div>
    </div>  

    <input type="submit" value="Submit" name="submit">
</form>

<?php
}
?>

此代码 sn-p 将用户输入作为 HTML 表格发送到电子邮件。验证也可以正常工作，但验证错误出现在表单顶部。

我想在每个字段旁边显示验证错误。如何仅使用 PHP 做到这一点？

Answer 1

你也可以这样做。

<form method="post" action="">
<input type="text" name="email" value="<?php echo $_POST['email'];?>"/>
<?php if(!empty($_POST['email']) && !filter_var($_POST['email'], 
                                      FILTER_VALIDATE_EMAIL)) : ?>
<small class="errorText">Email is not valid!</small>
<?php endif; ?>
<br>
<input type="submit" name="send" value="send">
</form>

<style type="text/css">
.errorText {color: red;}
 </style>

Answer 2

您可以将字段名称添加为 $errors 数组的键，然后在每个字段之后进行检查。像这样的：

//Check the name and make sure that it isn't a blank/empty string.
if(strlen(trim($sender)) === 0){
    //Blank string, add error to $errors array.
    $errors['sendername'] = "You must enter your name!";
}
...
<div class="label-input-wrapper">
    <div class="form-label">Name</div>
    <div class="form-input">
        <input type="text" name="sendername"/>
        <?php if(isset($errors['sendername'])) { echo $errors['sendername']; } ?>
    </div>
</div>