How to display error message in html form with javascript

Files we need

We create three files in the same folder.

/-- projects-folder
  |-- index.php
  |-- script.js
  |-- script.php

• An index.php file in which we are going to write the html code.
• A script.js file to write the javascript code.
• And a script.php file to catch the form's submission and send the success message if every field has a value.

The html code

Below i have the form element and its the same form that i have in the live demo.

 // Include the php file.
	<?php include "script.php" ?>

<form name="register-form" action="" method="post">
	<label>Enter Username</label>
	<input type="text" name="username">
	<p class="error username-error"></p>
	
	<label>Enter Password</label>
	<input type="text" name="password">
	<p class="error password-error"></p>

	<label>Enter email</label>
	<input type="text" name="email">
	<p class="error email-error"></p>
	
	<button type="submit" name="submit">Submit</button>

	<p class="success"><?php echo $success ?></p>			
</form>

<script src="script.js"></script>

To display validation errors under the input fields, I've added a paragraph element acting as a placeholder with a generic class of 'error' and a unique class corresponding to each input field. The error placeholder is hidden by default by setting the 'display' property to 'none' in the css code.

For instance, under the username field, the error placeholder has a unique class of 'username-error', and similar unique classes, such as 'password-error' and 'email-error', are assigned under the password and email fields, respectively.

We'll be targeting these unique classes from the JavaScript file to display any validation errors.

If you want to learn how to access a form's data check out the article. How to get the values from a form with JavaScript

The JavaScript code

// Targeting the form and adding an onsubmit event-listener.
document.forms['register-form'].onsubmit = function(event){

// We are targeting all error placeholders and hide
// them from any previous displayed error. 
let errors = document.querySelectorAll(".error");
for(let error of errors){
	error.style.display = "none";
}

// We clear the success message from any previous 
// succeeded submission.
document.querySelector(".success").innerHTML = "";	

// Targeting and trim the username value 
// and if it's empty ... 	
	if(this.username.value.trim() === ""){

	// ... we are displaying in the username-error 
	// placeholder an error ... 	
		document.querySelector(".username-error").innerHTML = 
		"Please enter a username";
	
	// ... and we set the css display property to 
	// block to make the placeholder visible. 	
		document.querySelector(".username-error").style.display = 
		"block";
	
	// And we stop the function here.	
		return false;
	}

	// The same concept is applied to the other two input fields.

	if(this.password.value.trim() === ""){
		document.querySelector(".password-error").innerHTML = 
		"Please enter a password";
		
		document.querySelector(".password-error").style.display = 
		"block";

		return false;
	}

	if(this.email.value.trim() === ""){
		document.querySelector(".email-error").innerHTML = 
		"Please enter a email";

		document.querySelector(".email-error").style.display = 
		"block";

		return false;
	}
}	

The script.php file

If the javascript validation has no errors we will catch the form's submission in the script.php file, and we will send back the string "success".

<?php 	
	$success = null;
	if(isset($_POST['submit'])){
		$success = "Success";
	}

Summary

And that's it, this is how we display error messages under input fields with javascript. 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: 1074

Buy me a coffee