IMPROVING EMAIL CLIENT-SIDE VALIDATION WITH VANILLA JAVASCRIPT

One of the most famous one-liners newbie frontend web developers (like me) get to hear from experienced web developers is "DO NOT RELY ON CLIENT-SIDE VALIDATION" and they are a lot of good reasons for that. You could check out this article by Serge Truth on SecurityInnovation blog.

However, while doing all the validation on the server, it's essential to utilize client-side validation to improve the user experience. In this short tutorial, we will be using the HTMLSelectElement.checkValidity() method to improve the user experience of email form input client-side validation.

Note: You can perform complete form input validation with validatejs. Validate.js is a validation library built with JavaScript used to provide a cross framework and cross-language way of validating data.

Pre-requisites:

• Basic Knowledge of HTML5 form input Basic Knowledge of:
• Basic Knowledge of CSS HTML form input
• Basic Knowledge of JavaScript CSS3
• JavaScript

Ahhhh!, I just disobeyed one fundamental rule of programming, DON'T REPEAT YOURSELF, I repeated "Basic Knowledge", I should fix that now.

Okay, let's begin.

Firstly, we should write the HTML required for creating an email input field.

There's not much going on here. We have an id = "emailVal", a <span> with class="validateIcons" and <pre> with class="preText". We would be using these classes and id in our JavaScript to dynamically add CSS and work on the validation.

If you have no idea of how required and title works, you should check out this article on Tips for Validating HTML form inputs by my mentor Nedy Udombat.

At this point, you'll want to style your email input a little.

Let's create a JavaScript file, I'll call mine validate.js.

Write these 2 lines

Here, we've targeted the input element by

   document.getElementById("emailVal")

and the <pre> element by

   document.querySelector("preText")

Next, we addEventListener to the <input> element. Now the emailVal variable represents the <input> element.

Here, we use the keyup event to do something when the user is done hitting a key.

Next, we are going to check if the user is inputting the right email format according to HTML Living Standard Check it out here.

W3.org defines a valid email as

A valid e-mail address is a string that matches the email production of the following ABNF, the character set for which is Unicode. This ABNF implements the extensions described in RFC 1123. [ABNF] [RFC5322] [RFC1034] [RFC1123]. More...

Back to the code

Here, in our anonymous callback function, we created a isValidEmail and set it to emailVal.checkValidity(). Instead of using this regular expression /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/ we use the checkValidity() method.

Next,

Here we say if (isValidEmail === true) do something else { do something } .

Okay, this is what our validate.js has done so far

That works fine. Here we dynamically add textContent to the pre tag. Now let's add focus to the input element, so when the user is typing the border-color changes to red if the user is typing the wrong email pattern and green if he is doing it the right way. They are a lot of ways to implement this, in fact, it is simpler when doing this with CSS. With CSS you can use the :invalid and :valid pseudo-classes and do something like this

Finally, we would be adding fas fa-check-circle and fas fa-exclamation-circle icons to the email input. If the user is successful, we display the fas fa-check-circle else we display the fas fa-exclamation-circle.

First, we select the <span class="validateIcon">

Then, we add it to the icons as innerHTML, not textContent.

Elements that do not have both an opening and closing tag cannot have an innerHTML property. That's why I added <span> to <input>

And you shouldn't be using innerHTML anymore cause:

• it's slow compared to appendChild() and insertAdjacentHTML()
• Very prone to script injection attacks when not handled properly

Okay, let's see if our code runs. Run the pen on and click on the 0.5X.

Seems its working fine.

Thanks for reading. If you like this, please comment or follow me on Twitter.