How to perform client-side validation with HTML 5 and JavaScript

Front-end or client-side validation alerts the user about issues in the form before they even send it to the server. It offers a great user experience in your app, as the user is immediately alerted to problematic data, and saves money and resources.

The validation is done with built-in HTML 5 features like the required attribute and/or with JavaScript if we aim to customize the validation and/or perform complex ones.

Form

First things first, let’s create a basic form.

Our form has three required input fields. For a better user experience, we’ve added the rules that the user must follow.

Now, we want to turn the font color red when the current inputthe one that has the focus does not respect the rule, and turn it green when it does respect the rule.

Note: To see the source code, click on the HTML tab.

Validation

The only validation or constraint we have in our form is the built-in HTML5: required and fields type. Now we want more. We want the user to see what’s wrong while they fill the form. To do so, we’ll need to handle the JavaScript input form event.

Let’s handle the username field.

We first select the field and its rules:

// DOM Elements
const unameElt = document.getElementById("username");
const unameRuleElt = document.getElementsByClassName("unameRule");

Next, we can add an event listener to the field:

unameElt.addEventListener("input", unameHandler);

Now we can implement the handler function:

function unameHandler(e) {
        for (let i = 0; i < unameRuleElt.length; i++) {
          unameRuleElt[i].style.color = "red";
        }
      }

As soon as the user enters the username field and begins to type, all its corresponding rules turn red. You can see that I use a loop because the JavaScript getElementsByClassName() returns an HTMLCollection (object).

The next thing to do is to handle each specific rule.

We first select them:

function unameHandler(e) {
        const unameRule1Elt = document.getElementById("unameRule1");
        const unameRule2Elt = document.getElementById("unameRule2");
        // your loop here...
}

Let’s store the input value in a variable:

const uname = e.target.value;

The first rule for the username is:

• Username must be at least 2 characters long.

So, in our code, we can check for the length of the uname variable if it matches the rule, in which case we change the font color to green.

if (uname.length >= 2) unameRule1Elt.style.color = "green";

The second rule says:

• Username must not start with a number or a special character.

For this rule, I suggest that we use a regex. Let’s build the regex:

• the first letter must be a text: ^[a-z]+
• can contain any string (digit, character…) .*
• must be case insensitive: i

Let’s put it all together:

function unameHandler(e) {
        const unameRule1Elt = document.getElementById("unameRule1");
        const unameRule2Elt = document.getElementById("unameRule2");

        const uname = e.target.value;
        const regex = /^[a-z]+.*/i;

        for (let i = 0; i < unameRuleElt.length; i++) {
          unameRuleElt[i].style.color = "red";
        }

        if (uname.length >= 2) unameRule1Elt.style.color = "green";
        if (regex.test(uname)) unameRule2Elt.style.color = "green";
      }

Let’s now test the form.

Repeat the same process to handle the remaining fields.

You can find my code in the JavaScript tag of the code above.

Wrap up

To offer users of your site a better user experience while they’re just filling the form, you need to handle the input event listener. Regex can also help you check for input field pattern matches.