Displaying Error Messages Below Input Fields (Form Validation)

When creating forms, it’s helpful to display error messages right below each input field. This way, users can quickly see which field has an issue.

Example:

form.php

PHP

<?php
// Define variables and set to empty values
$name = $email = $age = $website = "";
$nameErr = $emailErr = $ageErr = $websiteErr = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Validate Name
    if (empty($_POST["name"])) {
        $nameErr = "Name is required";
    } else {
        $name = htmlspecialchars($_POST["name"]);
        if (!preg_match("/^[a-zA-Z ]*$/", $name)) {
            $nameErr = "Only letters and white space allowed";
        }
    }

    // Validate Email
    if (empty($_POST["email"])) {
        $emailErr = "Email is required";
    } else {
        $email = htmlspecialchars($_POST["email"]);
        if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
            $emailErr = "Invalid email format";
        }
    }

    // Validate Age
    if (empty($_POST["age"])) {
        $ageErr = "Age is required";
    } else {
        $age = htmlspecialchars($_POST["age"]);
        if (!is_numeric($age) || $age <= 0) {
            $ageErr = "Age must be a positive number";
        }
    }

    // Validate Website
    if (empty($_POST["website"])) {
        $websiteErr = "Website is required";
    } else {
        $website = htmlspecialchars($_POST["website"]);
        if (!filter_var($website, FILTER_VALIDATE_URL)) {
            $websiteErr = "Invalid URL format";
        }
    }
}
?>

HTML Form with Error Messages Below Inputs

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Form Validation with Inline Errors</title>
    <style>
        .error {
            color: red;
            font-size: 14px;
        }
        .form-group {
            margin-bottom: 15px;
        }
    </style>
</head>
<body>

<h2>Student Registration Form</h2>
<form method="post" action="form.php">

    <div class="form-group">
        Name: <br>
        <input type="text" name="name" value="<?php echo $name; ?>">
        <div class="error"><?php echo $nameErr; ?></div>
    </div>

    <div class="form-group">
        Email: <br>
        <input type="text" name="email" value="<?php echo $email; ?>">
        <div class="error"><?php echo $emailErr; ?></div>
    </div>

    <div class="form-group">
        Age: <br>
        <input type="text" name="age" value="<?php echo $age; ?>">
        <div class="error"><?php echo $ageErr; ?></div>
    </div>

    <div class="form-group">
        Website: <br>
        <input type="text" name="website" value="<?php echo $website; ?>">
        <div class="error"><?php echo $websiteErr; ?></div>
    </div>

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

</body>
</html>

Explanation:

Error Variables
- For each input, we create an error variable ($nameErr, $emailErr, etc.).
- These hold the error messages if validation fails.
Validation
- empty() checks if the field is empty.
- preg_match() validates name (letters & spaces only).
- filter_var(..., FILTER_VALIDATE_EMAIL) checks email format.
- is_numeric() ensures age is a number.
- FILTER_VALIDATE_URL checks website format.
Inline Error Display
- Each <input> field is followed by <div class="error">...</div>.
- If validation fails, the corresponding error message is shown below the input.
- If no error, it remains empty.
Better User Experience
- Errors appear right below the field, making it clear and user-friendly.

This way, users instantly know where they made mistakes and can correct them easily.

Displaying Error Messages Below Input Fields (Form Validation)

Example:

form.php

HTML Form with Error Messages Below Inputs

Explanation:

Computer Courses

Pages