Phenquestions
Form validation is the basic and most important part of the web development process. Usually, form validation is done on the server-side. Form validation helps in showing error messages to the user if there is any unnecessary or wrong data is provided, or a required field is left empty. If the server finds any error, it throws back that error; then, we show the error message to the user. But, we can use javascript at the front-end to validate the form data and show errors right away. In this article, we will learn the basic form validation in javascript. So, let's get straight to the examples and see how can we do that in javascript.
Examples
First of all, we assume a form with the name of “testForm,” in which we have an input field with the label “User Name,” and an input type submits in our HTML file. In the form tag, we have created an onsubmit event, in which we are making closure and returning a function validateFunc().
In the script file, we will write the function definition of validateFunc(), which will get executed every time when the user hits the submit button. In that function, we will validate the username input field. We suppose that we want to validate either the username field is empty or not when the user hits the submit button.
So, to validate the username field. We first assign a variable to the document.testForm, just to give a clean and understandable look to the code. Then, in the function definition, we will write the code for validation. We will write an if statement to check the empty form field. If the username field is empty, we will show an alert box to show the error, focus on the username field again, and return false so that the form won't get submitted. Otherwise, if it passes the check and data get validated, we will return true to the function.
var theForm = document.testForm;// Form validation code
function validationFunc()
if (theForm.name.value == "")
alert( "name is empty" );
theForm.name.focus();
return false;
return (true);
After writing all this code. If we run the code and click on the submit button without writing anything in the form field.
As you can observe in the screenshot attached below, it throws an error in the alert box.
This is a very basic yet good example to get started with implementing the form validation. For further implementation, like multiple form validations or you want to have a check on character length as well.
For that purpose, we first suppose two form fields in the form tag with the label of “email” and “password” in our HTML file.
For validation in javascript, we will again put an if statement for validation of the email and password form fields in the function definition of the script file. Suppose we want to apply multiple validations on the email field like the field should not be empty, and its length should not be less than 10 characters. So, we can use OR “||” in the if statement. If any of these errors occur, it will show an alert box with the error message that we want to show, focus on the email form field, and return false to the function. Similarly, if we want to apply the character length check on the password field, we can do so.
var theForm = document.testForm;// Form validation code
function validationFunc()
if (theForm.name.value == "")
alert( "name is empty" );
theForm.name.focus();
return false;
if (theForm.email.value == "" || theForm.email.value.length < 10)
alert( "Email is inappropriate" );
theForm.email.focus();
return false;
if (theForm.password.value.length < 6)
alert( "Password must be 6 characters long" );
theForm.password.focus();
return false;
return (true);
After writing all this code, reload the page to have updated code. Now, either we leave an empty email field or write an email less than 10 characters. In both cases, it will show an “Email is inappropriate” error.
So, this is how we can apply basic form validation in JavaScript. We can also apply data validation on the client-side using Regex or by writing our own custom function. Suppose we want to apply data validation on the email field. The regex would be like this for validating an email.
if (/^[a-zA-Z0-9.!#$%&'*+/=?^_'|~-][email protected][a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(theForm.email.value))
alert( "Email is inappropriate" );
theForm.email.focus() ;
return false;
This was just a basic demonstration of data validation using regex. But, the sky is open for you to fly.
Conclusion
This article covers the basic form validation in javascript. We have also tried and have a sneak into the data validation using regex. If you want to learn more about regex, we have a dedicated article related to regex on linuxhint.com. For learning and understanding javascript's concepts and more useful content like this, keep visiting linuxhint.com. Thank you!
