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