How to display validation error next to the field?

Question

I am trying to create a simple form for a wordpress site. I've created a full form and it's working fine. The code is below.

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

This code snippet sends the user input as a HTML table to the email. Validation also works fine but the validation errors appear at top of the form.

I want to show the validation errors next to the each field. How can do that using PHP only?

Answer 1

You can do it this way also.

<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

You could add the field name as the key of the $errors array and then do a check after each field. Something like this:

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