Simple Form Client-side Validation Using JavaScript

Client-side Validation for a simple form.

Hey, learners. Welcome back. This time, we will discuss the front-end validation, otherwise known as the client-side validation.

We will initially dive slowly into what it is and then go a little deep into how it is achieved with basic HTML, CSS, and JavaScript. By the end of the article, we will build a small form with a simple form with some basic conditions.

Let us begin. So, every time we submit a form or fill in details for a login page or such, we will notice that it is required to have a long password of a specific sort, or it is compulsory to fill in the fields. These are part of the front-end or the client-side validation.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Table of Contents

WHY?

We perform the client-side validation is to restrict the user from entering any wrong information, avoiding unnecessary traffic to the page. We do this in the front end because we do not want to use the server every time for these issues.

How?

In general, we use simple JS to validate the information. It can be done by using if-else blocks, string handling methods, and, some CSS pseudo-classes. As you learn in-depth CSS and JS there are more ways to validate the information.

Today we will build a basic validation using JS and some attributes of HTML. In the coming articles, I will introduce new and unique ways to validate the information.

Portfolio Website using HTML and CSS (Source Code)

Creating a basic form:

Let us make a simple HTML and CSS form first and then get into JS.

<br /> See the Pen <a href="https://codepen.io/DeepCoder001/pen/vYemRXy" target="_blank" rel="noopener"><br /> Front-end validate</a> by Aneesh Malapaka (<a href="https://codepen.io/DeepCoder001" target="_blank" rel="noopener">@DeepCoder001</a>)<br /> on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.<br />

This is how the form should look at the end. Since the main aim is to learn validation, It is just a basic form. Now, as we see in the code we have input to take username, password and re-enter the password.

The list of all validations I will be showing today are:

Name and password validation.
Password Length and some other features.
Check if the password is equal or not.
Check if the form is filled in or not.

Then, we will see what else is possible with the front-end validation.

Name and Password validation:

Sometimes people might give a number as a name or try to submit without seeing the field. In such cases, we can use two techniques.

1)Using HTML:

HTML inbuilt provides some attributes for the input elements to check simple stuff like setting minimum and maximum length, required or not,

autocomplete, autosave, etc.. and using this is the simplest form of validation.

Let us see the code part for it.

So, here we used the attribute required, which can be set to boolean or left without a value and, it shows a caption to fill out the field that is left empty.

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

2)Using JS string handling functions:

Now, we will use JS to check if the field is empty or not. The string method we will use is the length method for now and see if the length is zero and return some message if true.

NOTE: PASTE THIS CODE AFTER THE BODY, SINCE LOADING IN HEAD CAUSES ERROR AS THE INPUTS ARE NOT DEFINED YET BEFORE THE BODY

 <script>

//paste it after the body part.

var Username = document.getElementById("name").value;
var pass = document.getElementById("pass").value;
var repass = document.getElementById("repass").value;

function submitForm() {
if (Username.length == 0 || pass.length == 0) {
alert("Pls fill out the fields!");
}

</script>

So, if we run this code snippet combined with the main code we get an alert window saying to fill out the fields.

How to make Password Generator Using HTML, CSS, & JavaScript

Password length and other features

Now, the creative part of the code starts. The password validation. We can validate the password with many conditions.

Some famous conditions we know are,

The password must contain at least one Uppercase char, one number, one symbol, and such.
Simple ones include start should be an upper case char, length more than a number.

Although the first one can be implemented by regular expressions with ease, learning it takes time. For now, we will use if-else blocks for this and use the string handling methods. We can also use the HTML attributes for the length condition. The max-length and min-length attributes for an input define it.

I will be showing a way to see that the first char is capital and the at least 2 chars are of uppercase.

There might be efficient ways but we will stick to the basics for today.

Thank you for reading!

CodeWithRandom

Simple Form Client-side Validation Using JavaScript