Simple JavaScript Form Validation

A simple JavaScript form validation script

I have written a simple JavaScript form validation code, which is easy to understand and implement. Please note that this code is written for absolute beginners with little to no programming knowledge, if you are already an expert user you can skip this post or provide your valuable input which will be highly appreciated.

Before jumping head first to the code let us understand a little bit about data validation.

Data Validation in a nutshell:

Data validation means checking the correctness or accuracy of the data before entering the same in the database thereby rejecting incorrect or bad data.

There are basically two types of data validation, one is the client side (browser) and the second type is the server side validation which happens at a server level. JavaScript is commonly used for client side data validation and languages such as PHP can be used for server side validation. Data Validation if done correctly can prevent spamming to a larger extent.

Importance of Client Side data validation:

Consider a situation where we rely only on server side validation, after the user had entered all necessary data and then pressed the Submit button. If some of the data that had been entered by the user had been in the wrong form or was simply missing, the server would have to send all the data back to the user and request that the form be resubmitted with correct information. This is an extremely lengthy process which also puts unnecessary burden on the server and might also irritate your user.

This is where client side validation comes into picture, here the validation is done at your user’s browser and the form is submitted only once data is validated. For better accuracy we can add data validation at the server end too, just in case if the client side validation is bypassed the data will still be validated at the server thereby rejecting the bad data.

Always make sure to have client side as well as server side data validation as client side validation can be bypassed easily.

Now as you have a little bit understanding of Client Side and Server Side data validation, let us have a look at the code.

Below is the simple HTML contact form that we will be validating, this is how it should look. Once our HTML form is ready we will then add our Simple JavaScript form validation code in our “script.js” page.

Simple JavaScript Form Validation

All we did here is created a simple HTML form, added “script.js” file under the <script></script> tag. “script.js” is the file where we will be writing our JavaScript code. Here an “onclick” JavaScript event will be triggered once you click on the submit button which will validate our form before submitting.

Simple JavaScript Form Validation

The above JavaScript code is used to validate our HTML form. All we did here was tried to check if a particular field is empty and if it is not empty then check if the provided data is valid or not.

You can have a look at the demo here

You can download the code from here 

P.S : Make sure to perform your data validation server-side as well. You can never trust client-side validation, which can be bypassed more easily. Use Client-side validation in the sense of providing a better User Experience (UX), so the user doesn’t have to submit and reload a page because of some invalid values.