\

Bootstrap Form Validation Using PHP And RegEx

Form Validation Using PHP And RegEx

In this tutorial, we will see how to create a Form Validation Using PHP And RegEx (i.e Regular Expression). We will Create a simple form Using Bootstrap CSS classes and HTML.


Check out the Demo on Form Validation Using PHP And RegEx.




Download Form Validation Using PHP And RegEx





Implementation

Let’s first start with implementing the required files i.e Bootstrap for designing the form.We will build a three input field where one goes for Name, second goes Email and the last one for the Contact Number. So let’s get into it.

For this form validation there will be only one file i.e index.php And other might be for CSS

index.php

<html>
	<head>
		<title> PHP - Form Validation</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
		<link rel="stylesheet" href="./style.css">

	</head>
	<body>
	   
	   			...  <!-- Form Goes Here -->

	   <script href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</body>
</html>

And the next this is we that will build a simple form to containing three forms with labels and at the end a submit button.

index.php

....

<form  method="POST" action="index.php"> <!-- On click Re-Submit To index.php -->
	<div class="form-group">
		<label for="exampleInputName1">Name</label>
		<input type="name" class="form-control" id="exampleInputName1" name="name" value="" placeholder="Username">
	</div>

	<div class="form-group">
		<label for="exampleInputEmail1">Email</label>
		<input type="email" class="form-control" id="exampleInputEmail1" name="email" value="" placeholder="Email">
	</div>
	
	<div class="form-group">
		<label for="exampleInputContact1">Contact <span class="span"> (+91xxxxxxxxxx)</span></label>
		<input type="number" class="form-control" id="exampleInputcontact1" name="contact" value="" placeholder="Contact No">
	</div>

	<button name="submit" value="Submit" type="submit" class="btn btn-success">Sign Up</button>
</form>

....

Validation

After building the form the next part will be validation. On click of a submit button the form must be validate the fiels with the proper syntax formate, and for that we will use RegEx.

1. Declare Empty Variable


<?php 

	// Initialize variables to null.
	$nameError ="";
	$emailError ="";
	$contactError ="";

?>

 

2. On Submit Button


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

       // VALIDATION GOES HERE      

     }
     ......

 

3. Validation Of Name, Email, Contact No.



     ......
  //On submitting form below function will execute

if(isset($_POST['submit'])){
	if (empty($_POST["name"])) {
		$nameError = " * Name is required";
	} else {
		$name = test_input($_POST["name"]);
// check name only contains letters and whitespace
		if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
			$nameError = " * Only letters and white space allowed"; 
		}
	}

	if (empty($_POST["email"])) {
		$emailError = " * Email is required";
	} else {
		$email = test_input($_POST["email"]);
// check if e-mail address syntax is valid or not
		if (!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/",$email)) {
			$emailError = " * Invalid email format";
		}
	}

	if (empty($_POST["contact"])) {
		$contactError = " * Contact Number Is Required";
	} else {
		$contact = test_input($_POST["contact"]);		
	// check if Contact Number syntax is valid or not
		if (!preg_match_all("/^(\+|\d)[0-9]{7,13}$/",$contact)) {
			$contactError = " *  Use Country Code (+91xxxxxxxxxx)"; 
		}
	}
}

     ......

4. Return Data (test_input)


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

Display Errors

When ever the submit button is hit, the form will first validate and proceed and if any error occured it will display the error. So in this form we will display every error individually next to the label tags.


    <form method="POST" action="index.php">
	<div class="form-group">
		<label >Name</label><span class="error"> <?php echo $nameError;?></span>
		   .......
	</div>
	
	<div class="form-group">
		<label>Email</label><span class="error"> <?php echo $emailError;?></span>
		  .......
	</div>
	
	<div class="form-group">
		<label>Contact</label><span class="error"> <?php echo $contactError;?></span>
		  ......
	</div>
	<button name="submit" value="Submit" type="submit" class="btn btn-success">Sign Up</button>
</form>
Demo Of Error
Form Validation Using PHP And RegEx

Display Submitted Data

After submitting form the data can be display below the form. just set the print the variable and it will display the data on submitting the form.


.....
	<div class="span">
		<span>Welcome : <?php echo $_POST["name"]; ?> 
			<!-- Shows Error -->
		<span class="error">  <?php echo $nameError;?></span></span>
		<br>
		<span>Your email address is: <?php echo $_POST["email"]; ?>
			<!-- Shows Error -->
		<span class="error">  <?php echo $emailError;?></span></span>
	</div>
.....
Form Data
Form Validation Using PHP And RegEx
About This Author

Hi This Is Rehmaanali. Blogging Is Just A Hobby. Graduate In Bsc Computer Science

Post A Reply