back to all posts

JavaScript Form Validation

by Nabendu Biswas / September 17th, 2020

#javascript #beginners #webdev
Series: JS-Projects

In this post we will learn to do JavaScript form validations. So, head over to your terminal and create a folder JSformValidation. Create three files -index.html, main.js and styles.css inside it. We are also opening the files in VS Code.


Next, we will create the basic html skeleton. We are also importing font-awesome to the project. Also, starting the project with Live Server.


After that, we will add all the code for the form, which will include four input box and one submit button. We also have two font-awesome icon and a message below each input.


Now, we will start to add the CSS in styles.css file. Here, we are first importing a google font. After that doing the basic styling to center the form.


Next, we will add styles to make the form look nice.


Next, head over to index.html and add two temporary classes of success and error to two form-control. We will remove them soon, as we will be adding them through javascript soon. This is only for testing purpose.


Again head over to styles.css and add the styles for error and success. We can see both of them in the first and the second input box.


Lastly, we will finish our styles by changing the style of the header a bit and also, adding css for the button.


Now, head over to main.js to add the logic. Here, we are first selecting all the ids. After that adding an event listener to the form and waiting for submit. Inside it we are getting all the values for the input fields. We are also trimming them, so if a user entered some blanks they will be trimmed.

Then we are checking if the usernameValue is empty string and calling the function setErrorFor(). If it is not empty, we are calling the setSuccessFor() method.

Inside the setErrorFor() method we are selecting the parent of the input, which is the div with the form-control. We are also selecting the small tag. After that we are adding the error class in div and the message in the small tag.

Inside the setSuccessFor() method, we are just selecting the div with the form-control and adding the success class.


Next, we will add the logic for email. Here beside checking for blank we are also checking whether, it’s a valid email. We are doing it by checking it through a function containing regular expression.


The regular expression checks for all invalid emails like the one below.


Now, we will check for passwords. Here we are checking whether both passwords are blank.


We are also checking whether both passwords are matching.

Passwords matchingPasswords matching

Now, if we give everything right and also the passwords match we will get all green after hitting the Submit button.

Everything rightEverything right

This complete our JavaScript form validation. You can find the code for the same in this github repo.

Nabendu Biswas