How to display error message in html form with javascript

Introduction

In this tutorial we are going to see how to display form errors under every input field with javascript.
In the example below we have a register form, and we are going to validate every field to check its value.
If the field is empty we are going to show an error message under the empty field.
Click on the submit button and try it out.

Ok, now let's see how we do this.

Files we need

We create two files in the same folder.

• An index.php file in which we are going to write the html code.
• And a script.js file to write the javascript code.
• If you download the source code you will get also the stylesheet.

The html code

Below we have the form element its the same form that you tried out in the demo above.
Let quick see what we have here.

<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"></p>			
</form>

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

• In line 1 we gave the form a name by setting the name's attribute value to "register-form".
  We are gonna use the name attribute in the javascript code to target the form.
• In line 3 we have the username input field, and under it in line 4 we have a p tag that acts as a placeholder.
  We gave the paragraph element a generic class of "error" to give every error element the same style. But we gave it also a unique class of "username-error" so we can target it from the javascript file and display the message.
  The error element is hidden by default in the css file, setting the display property to "hidden".
  We are going to change the display property to "block" in the javascript code if an error occurs.
  We will see that when we get to the javascript section.
• We do the exact same thing in line 7-8 with the password field,
  and in line 11-12 with the email input field.
• In line 14 we have the submit button.
• In line 16 we have a p tag to display the success message.
• And in line 19 we have a script tag pointing to the javascript file.

Now let's go write the javascript code.

The JavaScript code

In the javascript file i will target the register form and add an onsubmit event-listener. So every time we click on the submit button a function will run. I will pass in the function as an argument the event object, because i need the preventDefault() method to stop the form submit the data to the server if an error occurs.

document.forms['register-form'].onsubmit = function(event){
	
	if(this.username.value.trim() === ""){
		document.querySelector(".username-error").innerHTML = "Please enter a username";
		document.querySelector(".username-error").style.display = "block";
		event.preventDefault();
		return false;
	}

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

	if(this.email.value.trim() === ""){
		document.querySelector(".email-error").innerHTML = "Please enter a email";
		document.querySelector(".email-error").style.display = "block";
		event.preventDefault();
		return false;
	}

}	

Explaining the logic

• In the first if statement i will target the username input field and get the value, this.username.value.

  	if(this.username.value.trim() === ""){
  		document.querySelector(".username-error").innerHTML = "Please enter a username";
  		document.querySelector(".username-error").style.display = "block";
  		event.preventDefault();
  		return false;
  	}
  		

  In line 3 i have an if statement to check if the username input field is empty. I also use the trim() method because if we type just spaces in the field this is considered as not empty. Space is considered as a value.
  If the condition returns true, that means that the input field is empty so in line 4 we are targeting the "username-error" placeholder and with the innerHTML property we show the user a message. We also have to change the display property to block in line 5 to make the element visible. Remember that i mentioned that the error elements are set to display: none in the css file.
  In line 6 we use the preventDefault() method to stop the form to send the data to the server.
  And in line 7 we return false to stop the function.
• The same concept is applied to the other two input fields.

Summary

And that's it, this is how to display error message in html form with javascript.
I hope you like it.

Source code

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.

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

Times downloaded: 920

Buy me a coffee

Buy me a coffee with paypal