PHP 7 Registration Form Validation Example to Display Error Messages & Validate HTML5 User Input Fields in Browser

Welcome folks today in this blog post we will be looking at an advanced registration form validation using php 7 in browser. In this example we will be validating html5 form fields and displaying error messages. All the full source code of the application is shown below.

Get Started

In order to get started you need to install the xampp control panel and start the apache server as shown below

And now we need to make the index.php file inside the root directory and copy paste the following code

index.php

`Making the HTML5 Form`

<!DOCTYPE html>  
<html>  
<head>  
<style>  
.error {color: #FF0001;}  
</style>  
</head>  
<body>    
<h2>Registration Form</h2>  
<span class="error">* required field </span>  
<br><br>  
<form>    
    Name:   
    <input type="text" name="name">  
    <br><br>  
    E-mail:   
    <input type="text" name="email">  
    <br><br>  
    Mobile No:   
    <input type="text" name="mobileno">  
    <br><br>  
    Website:   
    <input type="text" name="website">  
    <br><br>  
    Gender:  
    <input type="radio" name="gender" value="male"> Male  
    <input type="radio" name="gender" value="female"> Female  
    <input type="radio" name="gender" value="other"> Other  
    <br><br>  
    Agree to Terms of Service:  
    <input type="checkbox" name="agree">  
    <br><br>                            
    <input type="submit" name="submit" value="Submit">   
    <br><br>                             
</form>
</body>  
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.error {color: #FF0001;}

</style>

</head>

<body>

<h2>Registration Form</h2>

<span class="error">* required field </span>

<form>

Name:

E-mail:

Mobile No:

Website:

Gender:

<input type="radio" name="gender" value="male"> Male

<input type="radio" name="gender" value="female"> Female

<input type="radio" name="gender" value="other"> Other

Agree to Terms of Service:

</form>

</body>

</html>

As you can see we have defined the various html5 form fields such as taking the user input for name, email, website, checkbox and mobile no fields. And then we have the submit button to submit the form using php. If you open this php file inside the browser you will see the below result

Adding the Method and Action Attributes to HTML5 Form

Now we will be adding the method which will be in this case post for transferring the data to php script and we will be also defining the action attribute to the same php file script.

<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" >    

</form>

</form>

As you can see we have defined the post method to the method attribute and then we are using the $_SERVER['PHP_SELF'] variable and we are passing the htmlspecialchars method.

Defining the Error Variables

Now we will be defining the form validation error variables inside the php code as shown below.

<?php  
// define variables to empty values  
$nameErr = $emailErr = $mobilenoErr = $genderErr = $websiteErr = $agreeErr = "";  
$name = $email = $mobileno = $gender = $website = $agree = "";  
?>

<?php

// define variables to empty values

$nameErr = $emailErr = $mobilenoErr = $genderErr = $websiteErr = $agreeErr = "";

$name = $email = $mobileno = $gender = $website = $agree = "";

As you can see we have defined the error variables for the form validation. These variables are for all the html5 form fields which are name, email, mobilenumber, gender, website and agree fields. And also we are declaring the variables for storing the user data these fields have the default values to empty.

Defining the Form Validation For HTML5 Fields

Name Input Field Validation

if ($_SERVER["REQUEST_METHOD"] == "POST") {  
      
//String Validation  
    if (empty($_POST["name"])) {  
         $nameErr = "Name is required";  
    } else {  
        $name = input_data($_POST["name"]);  
            // check if name only contains letters and whitespace  
            if (!preg_match("/^[a-zA-Z ]*$/",$name)) {  
                $nameErr = "Only alphabets and white space are allowed";  
            }  
    } 
}

if ($_SERVER["REQUEST_METHOD"] == "POST") {

//String Validation

if (empty($_POST["name"])) {

$nameErr = "Name is required";

} else {

$name = input_data($_POST["name"]);

// check if name only contains letters and whitespace

if (!preg_match("/^[a-zA-Z ]*$/",$name)) {

$nameErr = "Only alphabets and white space are allowed";

}

As you can see we have first of all checking if the request method is equal to POST or not using the REQUEST_METHOD variable. And inside that we will define all the form validation methods.

And first of all we are validating the name input field where user can enter their name. And here inside it we are first of all finding out whether the name field is empty or not using the empty() method. And if name field is not empty then we will first of all remove all the spaces and trim all the special characters. For this we are calling the external function input_data() method to do this process. And after that we are calling the preg_match() to perform the validation for the name field using the regular expression. If the regular expression fails then we are setting the error message for the name field which is only alphabets and white spaces are allowed.

function input_data($data) {  
  $data = trim($data);  
  $data = stripslashes($data);  
  $data = htmlspecialchars($data);  
  return $data;  
}

function input_data($data) {

$data = trim($data);

$data = stripslashes($data);

$data = htmlspecialchars($data);

return $data;

}

As you can see we are taking the input data as an argument in this function. We are first of all trimming all the whitespaces using the trim() function of php. And then we are removing the slashes using the stripslashes() passing the input data as an argument. And then we are calling the htmlspecialchars() method to trim and remove the special characters from the input data. And lastly we are returning the data from this function.

Displaying the Error Message For Name Input Field

<input type="text" name="name">  
<span class="error">* <?php echo $nameErr; ?> </span>

1 2	<input type="text" name="name"> <span class="error">* <?php echo $nameErr; ?> </span>

As you can see we are displaying the error message using the php name error variable. We are using the echo statement to render the dynamic error message.

Email Validation

Now we will be doing the email validation inside this example. And inside this we will again calling the empty() method to check whether the email field is empty or not. And here we are passing the email as an argument. If it returns true then we are setting the error message for the email field that email is required and if it’s returns false then we are validating the input data using the filter_var() method and here we have a constant specifically for email which is FILTER_VALIDATE_EMAIL for checking whether the email is valid or not.

//Email Validation   
    if (empty($_POST["email"])) {  
            $emailErr = "Email is required";  
    } else {  
            $email = input_data($_POST["email"]);  
            // check that the e-mail address is well-formed  
            if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {  
                $emailErr = "Invalid email format";  
            }  
     }

//Email Validation

if (empty($_POST["email"])) {

$emailErr = "Email is required";

} else {

$email = input_data($_POST["email"]);

// check that the e-mail address is well-formed

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {

$emailErr = "Invalid email format";

}

Displaying the Error Message For Email Input Field

<input type="text" name="email">  
<span class="error">* <?php echo $emailErr; ?> </span>

1 2	<input type="text" name="email"> <span class="error">* <?php echo $emailErr; ?> </span>

As you can see we are displaying the error message using the php email error variable. We are using the echo statement to render the dynamic error message.

Mobile Number Validation

Now we will be doing the mobile number validation inside this example. And inside this we will again calling the empty() method to check whether the mobile number field is empty or not. And here we are passing the number as an argument. If it returns true then we are setting the error message for the mobile number field that mobile number is required and if it’s returns false then we are validating the mobile number using the regular expression using the preg_match() method. Here we are checking inside this input number only numbers are allowed. And lastly we are checking for the length of the mobile number. Inside this if condition we are checking if this number is equal to 10 or not.

//Number Validation  
    if (empty($_POST["mobileno"])) {  
            $mobilenoErr = "Mobile no is required";  
    } else {  
            $mobileno = input_data($_POST["mobileno"]);  
            // check if mobile no is well-formed  
            if (!preg_match ("/^[0-9]*$/", $mobileno) ) {  
            $mobilenoErr = "Only numeric value is allowed.";  
            }  
        //check mobile no length should not be less and greator than 10  
        if (strlen ($mobileno) != 10) {  
            $mobilenoErr = "Mobile no must contain 10 digits.";  
            }  
    }

//Number Validation

if (empty($_POST["mobileno"])) {

$mobilenoErr = "Mobile no is required";

} else {

$mobileno = input_data($_POST["mobileno"]);

// check if mobile no is well-formed

if (!preg_match ("/^[0-9]*$/", $mobileno) ) {

$mobilenoErr = "Only numeric value is allowed.";

}

//check mobile no length should not be less and greator than 10

if (strlen ($mobileno) != 10) {

$mobilenoErr = "Mobile no must contain 10 digits.";

}

Displaying the Error Message For Mobile Number Input Field

<input type="text" name="mobileno">  
<span class="error">* <?php echo $mobilenoErr; ?> </span>

1 2	<input type="text" name="mobileno"> <span class="error">* <?php echo $mobilenoErr; ?> </span>

As you can see we are displaying the error message using the php mobile number error variable. We are using the echo statement to render the dynamic error message.

Website URL Validation

Now we will be doing the website url validation inside this example. And inside this we will again calling the empty() method to check whether the website url field is empty or not. And here we are passing the url as an argument. If it returns true then we are setting the error message for the website url field that website url is required and if it’s returns false then we are validating the website url using the regular expression using the preg_match() method. Here we are checking inside this function we are passing the website url and also passing the regular expression of valid website url. If it’s not a valid url then we will set the error message that the given url is an invalid url

 //URL Validation      
    if (empty($_POST["website"])) {  
        $websiteErr = "Website URL is required";  
    } else {  
            $website = input_data($_POST["website"]);  
            // check if URL address syntax is valid  
            if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) {  
                $websiteErr = "Invalid URL";  
            }      
    }

//URL Validation

if (empty($_POST["website"])) {

$websiteErr = "Website URL is required";

} else {

$website = input_data($_POST["website"]);

// check if URL address syntax is valid

if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) {

$websiteErr = "Invalid URL";

}

Displaying the Error Message For Website URL Input Field

<input type="text" name="website">  
<span class="error"><?php echo $websiteErr; ?> </span>

1 2	<input type="text" name="website"> <span class="error"><?php echo $websiteErr; ?> </span>

As you can see we are displaying the error message using the php website url error variable. We are using the echo statement to render the dynamic error message.

Gender Radio Button Validation

Now we will be doing the gender radio button validation inside this example. And inside this we will again calling the empty() method to check whether the gender field is empty or not. And here we are passing the url as an argument. If it returns true then we are setting the error message for the gender field that gender is required and if it’s returns false then we are storing the value of the radio button of gender input field in the variable.

//Empty Field Validation  
    if (empty ($_POST["gender"])) {  
            $genderErr = "Gender is required";  
    } else {  
            $gender = input_data($_POST["gender"]);  
    }

//Empty Field Validation

if (empty ($_POST["gender"])) {

$genderErr = "Gender is required";

} else {

$gender = input_data($_POST["gender"]);

}

Displaying the Error Message For Gender Radio Button Input Field

<input type="radio" name="gender" value="male"> Male  
<input type="radio" name="gender" value="female"> Female  
<input type="radio" name="gender" value="other"> Other  
<span class="error">* <?php echo $genderErr; ?> </span>

<input type="radio" name="gender" value="male"> Male

<input type="radio" name="gender" value="female"> Female

<input type="radio" name="gender" value="other"> Other

As you can see we are displaying the error message using the php gender radio button error variable. We are using the echo statement to render the dynamic error message.

Agree Checkbox Button Validation

Now we will be doing the checkbox button validation inside this example. And inside this we will again calling the empty() method to check whether the agree checkbox field is empty or not. And here we are passing the agree checkbox value as an argument. If it returns true then we are setting the error message for the agree checkbox field that agree option is required and if it’s returns false then we are storing the value of the agree checkbox button of agree checkbox input field in the variable.

//Checkbox Validation  
    if (!isset($_POST['agree'])){  
            $agreeErr = "Accept terms of services before submit.";  
    } else {  
            $agree = input_data($_POST["agree"]);  
    }

//Checkbox Validation

if (!isset($_POST['agree'])){

$agreeErr = "Accept terms of services before submit.";

} else {

$agree = input_data($_POST["agree"]);

}

Displaying the Error Message For Agree Checkbox Button Input Field

<input type="checkbox" name="agree">  
<span class="error">* <?php echo $agreeErr; ?> </span>

1 2	<input type="checkbox" name="agree"> <span class="error">* <?php echo $agreeErr; ?> </span>

As you can see we are displaying the error message using the php agree checkbox error variable. We are using the echo statement to render the dynamic error message.

Displaying the Registration Form Data in Browser

Now we will be displaying the registration form data in browser. First of all we will be comparing the error variables if they are empty then we perfectly know that there are no errors are there. So we can safely display all the user input fields and data as shown below.

<?php  
    if(isset($_POST['submit'])) {  
    if($nameErr == "" && $emailErr == "" && $mobilenoErr == "" && $genderErr == "" && $websiteErr == "" && $agreeErr == "") {  
        echo "<h3 color = #FF0001> <b>You have sucessfully registered.</b> </h3>";  
        echo "<h2>Your Input:</h2>";  
        echo "Name: " .$name;  
        echo "<br>";  
        echo "Email: " .$email;  
        echo "<br>";  
        echo "Mobile No: " .$mobileno;  
        echo "<br>";  
        echo "Website: " .$website;  
        echo "<br>";  
        echo "Gender: " .$gender;  
    } else {  
        echo "<h3> <b>You didn't filled up the form correctly.</b> </h3>";  
    }  
    }  
?>

<?php

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

if($nameErr == "" && $emailErr == "" && $mobilenoErr == "" && $genderErr == "" && $websiteErr == "" && $agreeErr == "") {

echo "<h3 color = #FF0001> <b>You have sucessfully registered.</b> </h3>";

echo "<h2>Your Input:</h2>";

echo "Name: " .$name;

echo "<br>";

echo "Email: " .$email;

echo "<br>";

echo "Mobile No: " .$mobileno;

echo "<br>";

echo "Website: " .$website;

echo "<br>";

echo "Gender: " .$gender;

} else {

echo "<h3> <b>You didn't filled up the form correctly.</b> </h3>";

}

As you can see we are using the echo statement to render all the data which is submitted by the user. And if you make any mistakes then we are showing the message that you didn’t filled the form correctly.

Full Example Code

Wrapping the post this is the full source code of the index.php file as shown below

index.php

<!DOCTYPE html>  
<html>  
<head>  
<style>  
.error {color: #FF0001;}  
</style>  
</head>  
<body>    
  
<?php  
// define variables to empty values  
$nameErr = $emailErr = $mobilenoErr = $genderErr = $websiteErr = $agreeErr = "";  
$name = $email = $mobileno = $gender = $website = $agree = "";  
  
//Input fields validation  
if ($_SERVER["REQUEST_METHOD"] == "POST") {  
      
//String Validation  
    if (empty($_POST["name"])) {  
         $nameErr = "Name is required";  
    } else {  
        $name = input_data($_POST["name"]);  
            // check if name only contains letters and whitespace  
            if (!preg_match("/^[a-zA-Z ]*$/",$name)) {  
                $nameErr = "Only alphabets and white space are allowed";  
            }  
    }  
      
    //Email Validation   
    if (empty($_POST["email"])) {  
            $emailErr = "Email is required";  
    } else {  
            $email = input_data($_POST["email"]);  
            // check that the e-mail address is well-formed  
            if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {  
                $emailErr = "Invalid email format";  
            }  
     }  
    
    //Number Validation  
    if (empty($_POST["mobileno"])) {  
            $mobilenoErr = "Mobile no is required";  
    } else {  
            $mobileno = input_data($_POST["mobileno"]);  
            // check if mobile no is well-formed  
            if (!preg_match ("/^[0-9]*$/", $mobileno) ) {  
            $mobilenoErr = "Only numeric value is allowed.";  
            }  
        //check mobile no length should not be less and greator than 10  
        if (strlen ($mobileno) != 10) {  
            $mobilenoErr = "Mobile no must contain 10 digits.";  
            }  
    }  
      
    //URL Validation      
    if (empty($_POST["website"])) {  
        $websiteErr = "Website URL is required";  
    } else {  
            $website = input_data($_POST["website"]);  
            // check if URL address syntax is valid  
            if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) {  
                $websiteErr = "Invalid URL";  
            }      
    }  
      
    //Empty Field Validation  
    if (empty ($_POST["gender"])) {  
            $genderErr = "Gender is required";  
    } else {  
            $gender = input_data($_POST["gender"]);  
    }  
  
    //Checkbox Validation  
    if (!isset($_POST['agree'])){  
            $agreeErr = "Accept terms of services before submit.";  
    } else {  
            $agree = input_data($_POST["agree"]);  
    }  
}  
function input_data($data) {  
  $data = trim($data);  
  $data = stripslashes($data);  
  $data = htmlspecialchars($data);  
  return $data;  
}  
?>  
  
<h2>Registration Form</h2>  
<span class = "error">* required field </span>  
<br><br>  
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" >    
    Name:   
    <input type="text" name="name">  
    <span class="error">* <?php echo $nameErr; ?> </span>  
    <br><br>  
    E-mail:   
    <input type="text" name="email">  
    <span class="error">* <?php echo $emailErr; ?> </span>  
    <br><br>  
    Mobile No:   
    <input type="text" name="mobileno">  
    <span class="error">* <?php echo $mobilenoErr; ?> </span>  
    <br><br>  
    Website:   
    <input type="text" name="website">  
    <span class="error"><?php echo $websiteErr; ?> </span>  
    <br><br>  
    Gender:  
    <input type="radio" name="gender" value="male"> Male  
    <input type="radio" name="gender" value="female"> Female  
    <input type="radio" name="gender" value="other"> Other  
    <span class="error">* <?php echo $genderErr; ?> </span>  
    <br><br>  
    Agree to Terms of Service:  
    <input type="checkbox" name="agree">  
    <span class="error">* <?php echo $agreeErr; ?> </span>  
    <br><br>                            
    <input type="submit" name="submit" value="Submit">   
    <br><br>                             
</form>  
  
<?php  
    if(isset($_POST['submit'])) {  
    if($nameErr == "" && $emailErr == "" && $mobilenoErr == "" && $genderErr == "" && $websiteErr == "" && $agreeErr == "") {  
        echo "<h3 color = #FF0001> <b>You have sucessfully registered.</b> </h3>";  
        echo "<h2>Your Input:</h2>";  
        echo "Name: " .$name;  
        echo "<br>";  
        echo "Email: " .$email;  
        echo "<br>";  
        echo "Mobile No: " .$mobileno;  
        echo "<br>";  
        echo "Website: " .$website;  
        echo "<br>";  
        echo "Gender: " .$gender;  
    } else {  
        echo "<h3> <b>You didn't filled up the form correctly.</b> </h3>";  
    }  
    }  
?>  
  
</body>  
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

<!DOCTYPE html>

<html>

<head>

<style>

.error {color: #FF0001;}

</style>

</head>

<body>

<?php

// define variables to empty values

$nameErr = $emailErr = $mobilenoErr = $genderErr = $websiteErr = $agreeErr = "";

$name = $email = $mobileno = $gender = $website = $agree = "";

//Input fields validation

if ($_SERVER["REQUEST_METHOD"] == "POST") {

//String Validation

if (empty($_POST["name"])) {

$nameErr = "Name is required";

} else {

$name = input_data($_POST["name"]);

// check if name only contains letters and whitespace

if (!preg_match("/^[a-zA-Z ]*$/",$name)) {

$nameErr = "Only alphabets and white space are allowed";

}

//Email Validation

if (empty($_POST["email"])) {

$emailErr = "Email is required";

} else {

$email = input_data($_POST["email"]);

// check that the e-mail address is well-formed

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {

$emailErr = "Invalid email format";

}

//Number Validation

if (empty($_POST["mobileno"])) {

$mobilenoErr = "Mobile no is required";

} else {

$mobileno = input_data($_POST["mobileno"]);

// check if mobile no is well-formed

if (!preg_match ("/^[0-9]*$/", $mobileno) ) {

$mobilenoErr = "Only numeric value is allowed.";

}

//check mobile no length should not be less and greator than 10

if (strlen ($mobileno) != 10) {

$mobilenoErr = "Mobile no must contain 10 digits.";

}

//URL Validation

if (empty($_POST["website"])) {

$websiteErr = "Website URL is required";

} else {

$website = input_data($_POST["website"]);

// check if URL address syntax is valid

if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) {

$websiteErr = "Invalid URL";

}

//Empty Field Validation

if (empty ($_POST["gender"])) {

$genderErr = "Gender is required";

} else {

$gender = input_data($_POST["gender"]);

}

//Checkbox Validation

if (!isset($_POST['agree'])){

$agreeErr = "Accept terms of services before submit.";

} else {

$agree = input_data($_POST["agree"]);

}

function input_data($data) {

$data = trim($data);

$data = stripslashes($data);

$data = htmlspecialchars($data);

return $data;

}

<h2>Registration Form</h2>

<span class = "error">* required field </span>

Name:

E-mail:

Mobile No:

Website:

Gender:

<input type="radio" name="gender" value="male"> Male

<input type="radio" name="gender" value="female"> Female

<input type="radio" name="gender" value="other"> Other

Agree to Terms of Service:

</form>

<?php

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

if($nameErr == "" && $emailErr == "" && $mobilenoErr == "" && $genderErr == "" && $websiteErr == "" && $agreeErr == "") {

echo "<h3 color = #FF0001> <b>You have sucessfully registered.</b> </h3>";

echo "<h2>Your Input:</h2>";

echo "Name: " .$name;

echo "<br>";

echo "Email: " .$email;

echo "<br>";

echo "Mobile No: " .$mobileno;

echo "<br>";

echo "Website: " .$website;

echo "<br>";

echo "Gender: " .$gender;

} else {

echo "<h3> <b>You didn't filled up the form correctly.</b> </h3>";

}

</body>

</html>