How to display form errors with php

Updated: 01-Mar-2024 / Tags: PHP Tutorials / Views: 5676 - Author: George

Introduction

In this tutorial we are going to see how to display form errors under every input field with php. We are going to have a simple validation, that will check for empty fields.
If a field is empty we are going to display an error message under it. If both fields have values then we are going to show a success message.

Live demo

Try out the form below so you have an idea on what we are going to code.
Leave the fields empty and click on the Sign up button.

If you have tried out the demo, lets start coding.

Files we need

We are going to need three files.

  • An index.php file where we are going to write the html form.
  • A script.php file to write the php code.
  • And a styles.css stylesheet to give the form the basic layout that you see in the demo.
    I am not going to cover the ccs file in this tutorial. If you want to see the css code you can download the source code.
  • All three files must be in the same folder.

The index.php file

Let's start with the index file in which we have a basic html structure. The important thing is that we include the script.php file in the first line of the file.
That means that every time we submit the form we will have access to the php code that we are going to write there.

<?php require("script.php") ?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="styles.css">
	<title>Displaying errors with PHP</title>
</head>
<body>
	<!-- HTML form in here -->
</body>
</html>	

The html form

We are going to write the html form between the body tags. We are going to leave the action="" attribute empty, that means that the form will be submitted to the same page. That's why we included the php file at the top of the page. And we are going to set the http request method to POST method="post".

	<form action="" method="post">

		<label>Username <span>Choose a username</span> </label>
		<input type="text" name="username" value="<?php echo $username; ?>" >
		<p class="error username-error">
			<?php echo $username_error; ?>
		</p>

		<label>Password <span>Choose a password</span> </label>
		<input type="text" name="password" value="<?php echo $password; ?>">
		<p class="error password-error">
			<?php echo $password_error; ?>
		</p>

		<input type="submit" name="sign-up" value="Sign Up">
		<p class="success">
			<?php echo $success; ?>
		</p>
	</form>

Let's break down the form

  • In this code block from line 13-17 we have the username input field.

    	<label>Username <span>Choose a username</span> </label>
    	<input type="text" name="username" value="<?php echo $username; ?>" >
    	<p class="error username-error">
    		<?php echo $username_error; ?>
    	</p>
    		

    In line 14 we have the input field in which we gave a name of name="username", and as a value we have a php variable named $username. That means that we won't loose the characters that we are typing in the field when we submit the page.

  • In line 15 we have a p tag which acts a placeholder with a generic class of "error" and a unique class of "username-error". Inside the error placeholder, we have again a php variable named $username_error.

    The $username_error variable will be set in the php file. The same goes with the $username variable set as the input field's value.

    The error placeholder is hidden by default. We have set the display property to "none" in the css file. If there is an error we will change the display property to "block" using php.
    You will see this at the end of the tutorial.

  • The same thing we have in the next code-block from line 19-23, where we have the password field.

    	<label>Password <span>Choose a password</span> </label>
    	<input type="text" name="password" value="<?php echo $password; ?>">
    	<p class="error password-error">
    		<?php echo $password_error; ?>
    	</p>
    		

    Here we have the input's name set to name="password", and the value set to the variable $password.

    And again we have an error placeholder with a unique class of "password-error", and inside we have a php variable named $password_error. Again those variables will get their values from the php file.

  • In the last code-block we have the form's submit button with the name set to name="Sign Up". We are going to use the name attribute in the php file to check if the button is pressed.

    	<input type="submit" name="sign-up" value="Sign Up">
    	<p class="success">
    		<?php echo $success; ?>
    	</p>
    		

    And in line 26 we have another placeholder, but this time the p tag has a class of "success", in here we are going to show the success message.

  • An important thing that i have to mention is, that the error and success placeholders are hidden in the css file by default. display: none;
    We are going to toggle the display property from "none" to "block" with php.

    Now let's go to the php file and write the php code.

The PHP file

Let's see what we have here.

<?php
	$username = null;	
	$password = null; 	
	$username_error = null;  
	$password_error = null; 
	$success = null;

	if(isset($_POST['sign-up'])){
		$username = $_POST['username'];
		$password = $_POST['password'];

		if(empty(trim($username))){
			$username_error = "Username field is empty";
		}else{
			if(empty(trim($password))){
				$password_error = "Password field is empty";
			}else{
				$success = "Thank you for your registration";
			}
		}
	}
  • From line 2-6 we set to null the php variables that we have in the html form, so the server will not throw a warning.
  • In line 8 we check if the submit button is pressed.
  • If the form is submitted we grab the username and password from the $_POST array and store them in variables in line 9 and 10.
  • In line 12 we check if the $username is empty. If so we assign a message to the $username_error variable in line 13.
  • If the $username is not empty we jump in the else clause, and we are going to check now if the $password variable is empty in line 15.

    Again if the password is empty we will assign a message to the $password_error variable which will be displayed in the html form.

  • And if the $password has a value, then we are going to assign the success message to the $success variable.
  • And that's it, this is a basic example on how to display form errors with php.

Now we have a last thing to do, and that is to change the display property of the error placeholders and the success placeholder when it is required.

So let's go back to the index file and inside the head section write the code below.

The index file

In the index file and inside the head tags and below the title tag place the code below.

<title>Displaying errors with PHP</title>
<?php
	if($username_error != null){
		?> <style>.username-error{display:block}</style> <?php
	}
	if($password_error != null){
		?> <style>.password-error{display:block}</style> <?php
	}
	if($success != null){
		?> <style>.success{display:block}</style> <?php
	}
?>
  • In the php code-block from line 9-19 we have three if statements.

    In the first two statements we check the $username_error variable and the $password_error variable, and if there is a message assigned to them we change the element's display property to "block" so we can show the error.

  • And in line 16 we do the same thing with the $success variable.

Summary

And that's it, this is one way on how we can display form errors with php, and i thing it is the easiest.
I hope you like it.

Last Words

Thanks for reading, i hope you find the article helpful.
Please leave a comment if you find any errors, so i can update the page with the correct code.

Source code

You can download the source code and use it in any way you like.

Times downloaded: 986

Buy me a coffee

If you like to say thanks, you can buy me a coffee.

Buy me a coffee with paypal