Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

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

Posted on November 2, 2022

 

 

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

 

 

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!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>

 

 

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.

 

 

PHP
1
2
3
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" >    
 
</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.

 

 

PgSQL
1
2
3
4
5
<?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

 

 

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
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.

 

 

PHP
1
2
3
4
5
6
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

 

 

PHP
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.

 

 

PHP
1
2
3
4
5
6
7
8
9
10
//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

 

 

PHP
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.

 

 

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//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

 

 

PHP
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

 

 

PHP
1
2
3
4
5
6
7
8
9
10
//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

 

 

PHP
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.

 

 

PHP
1
2
3
4
5
6
//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

 

 

PHP
1
2
3
4
<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>

 

 

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.

 

 

PHP
1
2
3
4
5
6
//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

 

 

PHP
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?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

 

 

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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>  
<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>

Recent Posts

  • Android Kotlin Project to Load Image From URL into ImageView Widget
  • Android Java Project to Make HTTP Call to JSONPlaceholder API and Display Data in RecyclerView Using GSON & Volley Library
  • Android Java Project to Download Youtube Video Thumbnail From URL & Save it inside SD Card
  • Android Java Project to Embed Google Maps & Add Markers Using Maps SDK
  • Android Java Project to Download Random Image From Unsplash Using OkHttp & Picasso Library & Display it
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme