PHP 8 Server Side Form Validation Tutorial Example

Author: | Published: | Updated: | Category: PHP
This tutorial guides you on how to create and validate a basic form using PHP and HTML. Create the responsive form using Bootstrap and validate the various form fields using PHP.

The primary aim of this tutorial is to make you aware of using the HTML Form Elements and an easy way to access those fields with PHP.

PHP 8 Form Validation Tutorial

We will create the form with different input fields such as text, select drop-down, radio buttons, checkboxes, and text area.

The server-side validation will be added to these inputs, and the user will be notified when any error occurs on form submission.

Create PHP Project

You should have either XAMPP or MAMP webserver up and running on your system.

Open the htdocs folder, inside this particular directory you have to create a new folder.

Name it anything you want, we named it php-demo, inside here we can keep all the project related files.

Create Simple HTML Form

Set up the form using <form> tag with method post.

The Bootstrap form component is used to design the form elements, be it text, radio button, select option, checkboxes, or text area.

The name attribute communicates with PHP script and helps in implementing the simple validation in PHP.

For the checkboxes, define the name value with array [] sign to store multiple values.

<form action="" method="post">
    <div class="form-group row">
        <label class="col-sm-4 col-form-label">Name</label>
        <div class="col-sm-8">
            <input type="text" name="name" class="form-control">
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-4 col-form-label">Email</label>
        <div class="col-sm-8">
            <input type="email" name="email" class="form-control">
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-4 col-form-label">Education</label>
        <div class="col-sm-8">
            <select id="education" name="education" class="form-control">
                <option selected="" disabled>...</option>
                <option value="Graduation">Graduation</option>
                <option value="Post Graduation">Post Graduation</option>
            </select>
        </div>
    </div>
    <fieldset class="form-group">
        <div class="row">
            <legend class="col-form-label col-sm-4 pt-0">Gender</legend>
            <div class="col-sm-8">
                <div class="custom-control custom-radio custom-control-inline">
                    <input type="radio" id="male" name="gender" value="Male" class="custom-control-input">
                    <label class="custom-control-label" for="male">Male</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                    <input type="radio" id="female" name="gender" value="Female" class="custom-control-input">
                    <label class="custom-control-label" for="female">Female</label>
                </div>
            </div>
        </div>
    </fieldset>
    <div class="form-group row">
        <div class="col-sm-4">Hobbies</div>
        <div class="col-sm-8">
            <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" name="hoby[]" value="Drawing" class="custom-control-input" id="drawing">
                <label class="custom-control-label" for="drawing">Drawing</label>
            </div>
            <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" name="hoby[]" value="Singing" class="custom-control-input" id="singing">
                <label class="custom-control-label" for="singing">Singing</label>
            </div>
            <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" name="hoby[]" value="Dancing" class="custom-control-input" id="dancing">
                <label class="custom-control-label" for="dancing">Dancing</label>
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-4 col-form-label">Comment</label>
        <div class="col-sm-8">
            <textarea class="form-control" name="comment" id="comment" rows="4"></textarea>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-sm-12 mt-3">
            <button type="submit" name="submit" class="btn btn-primary btn-block">Submit</button>
        </div>
    </div>
</form>

Server Side Form Validation in PHP

Set the empty variable these variables hold the error messages that we will show to the users if any error occurs.

Verify if the form is set or not using the isset() function.

Use the $_POST super-global variable, and It interacts with form’s method=”post” attribute to get the form data when the user submits the form by clicking on the submit button.

To protect against XSS attacks, we created a custom function checkInput().

It takes input data as a parameter and processes the input data by using trim, stripslashes, and htmlspecialchars() built-in PHP function.

The empty() function checks whether the input is empty or not.

If the variable is empty, display the error message to the user by wrapping the error message in HTML div.

The preg_match() function finds string for a pattern, and It returns true if a pattern exists and else returns false.

We used it for name validation and email validation.

You have to create the php-demo/form_validation.php file and insert the following code into the file.

<?php
// Error messages
$nameEmptyErr = "";
$emailEmptyErr = "";
$educationEmptyErr = "";
$genderEmptyErr = "";
$hobyEmptyErr = "";
$commentEmptyErr = "";
$nameErr = "";
$emailErr = "";
if (isset($_POST["submit"])) {
    // Set form variables
    $name = checkInput($_POST["name"]) ?? null;
    $email = checkInput($_POST["email"]) ?? null;
    $education = checkInput($_POST["education"]);
    $gender = checkInput($_POST["gender"]);
    $hoby = $_POST["hoby"] ?? null;
    $comment = checkInput($_POST["comment"]) ?? null;
    // Name validation
    if (empty($name)) {
        $nameEmptyErr = '<div class="error">
                Name can not be left blank.
            </div>';
    } // Allow letters and white space 
    else if (!preg_match("/^[a-zA-Z ]*$/", $name)) {
        $nameErr = '<div class="error">
                Only letters and white space allowed.
            </div>';
    } else {
        echo $name . '<br>';
    }
    // Email validation
    if (empty($email)) {
        $emailEmptyErr = '<div class="error">
                Email can not be left blank.
            </div>';
    } // E-mail format validation
    else if (!preg_match("/^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*@([a-z0-9\-]+\.)+[a-z]{2,6}$/ix", $email)) {
        $emailErr = '<div class="error">
                    Email format is not valid.
            </div>';
    } else {
        echo $email . '<br>';
    }

    // Select option validation
    if (empty($education)) {
        $educationEmptyErr = '<div class="error">
                Tell us about your education.
            </div>';
    } else {
        echo $education . '<br>';
    }

    // Radio button validation
    if (empty($gender)) {
        $genderEmptyErr = '<div class="error">
                Specify your gender.
            </div>';
    } else {
        echo $gender . '<br>';
    }

    // Checkbox validation
    if (!empty($hoby)) {
        foreach ($_POST['hoby'] as $val) {
            echo $val . '<br>';
        }
    } else {
        $hobyEmptyErr = '<div class="error">
                What are your hobbies.
            </div>';
    }
    // Text-area validation
    if (empty($comment)) {
        $commentEmptyErr = '<div class="error">
                This field is required.
            </div>';
    } else {
        echo $comment . '<br>';
    }
}
function checkInput($input)
{
    $input = trim($input);
    $input = stripslashes($input);
    $input = htmlspecialchars($input);
    return $input;
}
?>

At the root of your project, you have to create the php-demo/style.css file.

Add the custom CSS for styling the form and error messages.

.container {
    max-width: 700px;
    margin: 50px auto;
}
form {
    border: 1px solid #1A33FF;
    background: #ecf5fc;
    padding: 40px 50px 45px;
}
.form-control:focus {
    border-color: #000;
    box-shadow: none;
}
.error {
    color: red;
    font-weight: 400;
    display: block;
    padding: 6px 0;
    font-size: 14px;
}
.form-control.error {
    border-color: red;
    padding: .375rem .75rem;
}

We defined the php-demo/index.php in different file so import it inside the form file to make the validation work with PHP form.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Form Validation in PHP</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container mt-5">
    <h2 class="text-center mb-4">PHP 8 Bootstrap Server Side Form Validation Example</h2>
    <!-- Form validation script -->
    <?php include('form_validation.php'); ?>
    <!-- Contact form -->
    <form action="" method="post" novalidate>
      <div class="form-group row">
        <label class="col-sm-4 col-form-label">Name</label>
        <div class="col-sm-8">
          <input type="text" name="name" class="form-control">
          <!-- Error -->
          <?php echo $nameEmptyErr; ?>
          <?php echo $nameErr; ?>
        </div>
      </div>
      <div class="form-group row">
        <label class="col-sm-4 col-form-label">Email</label>
        <div class="col-sm-8">
          <input type="email" name="email" class="form-control">
          <!-- Error -->
          <?php echo $emailEmptyErr; ?>
          <?php echo $emailErr; ?>
        </div>
      </div>
      <div class="form-group row">
        <label class="col-sm-4 col-form-label">Education</label>
        <div class="col-sm-8">
          <select id="education" name="education" class="form-control">
            <option value="Graduation" selected>Graduation</option>
            <option value="Post Graduation">Post Graduation</option>
          </select>
          <!-- Error -->
          <?php echo $educationEmptyErr; ?>
        </div>
      </div>
      <fieldset class="form-group">
        <div class="row">
          <legend class="col-form-label col-sm-4 pt-0">Gender</legend>
          <div class="col-sm-8">
            <div class="custom-control custom-radio custom-control-inline">
              <input type="radio" id="male" name="gender" value="Male" class="custom-control-input" checked>
              <label class="custom-control-label" for="male" checked>Male</label>
            </div>
            <div class="custom-control custom-radio custom-control-inline">
              <input type="radio" id="female" name="gender" value="Female" class="custom-control-input">
              <label class="custom-control-label" for="female">Female</label>
            </div>
            <!-- Error -->
            <?php echo $genderEmptyErr; ?>
          </div>
        </div>
      </fieldset>
      <div class="form-group row">
        <div class="col-sm-4">Hobbies</div>
        <div class="col-sm-8">
          <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" name="hoby[]" value="Drawing" class="custom-control-input" id="drawing">
            <label class="custom-control-label" for="drawing">Drawing</label>
          </div>
          <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" name="hoby[]" value="Singing" class="custom-control-input" id="singing">
            <label class="custom-control-label" for="singing">Singing</label>
          </div>
          <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" name="hoby[]" value="Dancing" class="custom-control-input" id="dancing">
            <label class="custom-control-label" for="dancing">Dancing</label>
          </div>
          <!-- Error -->
          <?php echo $hobyEmptyErr; ?>
        </div>
      </div>
      <div class="form-group row">
        <label class="col-sm-4 col-form-label">Comment</label>
        <div class="col-sm-8">
          <textarea class="form-control" name="comment" id="comment" rows="4"></textarea>
          <!-- Error -->
          <?php echo $commentEmptyErr; ?>
        </div>
      </div>
      <div class="form-group row">
        <div class="col-sm-12 mt-3">
          <button type="submit" name="submit" class="btn btn-primary btn-block">Submit</button>
        </div>
      </div>
    </form>
  </div>
</body>
</html>

View App on Browser

To see app in the action, make sure to type the following URL on the browser.

http://localhost/php-demo/

Conclusion

Form validation is an essential step in web development. Security must be considered to protect against XSS attacks, especially if you have to store the form data to a database.

In this tutorial, we learned how to create and validate a form using PHP and show error messages.

Loved this? Share it with others:
Digamber - Author positronX.io

An experienced full-stack developer with a passion for providing top-notch web experiences, proficient in developing both the front and back ends of a web application by utilizing the expertise of HTML, CSS, JavaScript, PHP, and Python.

Recommended Tutorials

Build PHP 8 MySQL 5 Star Rating System using jQuery AJAX
PHP 8 AJAX Live Data Search with MySQL Tutorial
PHP 8 Select2 Multi Select with jQuery AJAX Tutorial
PHP 8 JSON Data Encode and Decode Examples
Integrate Google reCAPTCHA in PHP 8 Contact Form
How to Create Captcha in PHP 8 Contact Form
Create Contact Form in PHP 8 with jQuery Validation
PHP 8 Radio Buttons: Get Selected Value and Add Style
How to Get Selected Values from Select Option in PHP 8
Get Multiple Values of Selected Checkboxes in PHP 8
Create Pagination in PHP 8 with MySQL and Bootstrap
Build PHP 8 User Registration (Signup) Form with MySQL