The JavaScript Ecosystem #3 — Dynamic Input Validation using Vanilla JavaScript

Mrunal Salvi
Jan 12 · 5 min read

Hello people and welcome to my next post in “The JavaScript Ecosystem” Blog Series. In this article, I have tried to implement dynamic input validation using plain ES6 JavaScript. From the time since I have begun working on JavaScript frameworks, I have observed that most of the available frontend libraries do provide some kind of “state management” features that can be used to handle input validations in a web application. Frameworks like Angular, Vue, and libraries like React provide tools to bind your error status to a Component’s state and then conditionally render an error message as per the Component state changes. Knowing that these libraries and frameworks do provide simpler methods to handle user input validation, there are many web applications out there that comprise of simple HTML templates, CSS, and JavaScript without the interference of any frontend framework. So in this blog post, I will guide you on how you can implement the concept of dynamic input validation using built-in JavaScript methods and Regex.

Sign Up Form

Starter Template

To start with our small project, create and navigate to a new project directory and open it up in an IDE of your choice. Create multiple files following the project structure shown below:

-dynamic-input-vanillaJS
----index.html
----styles.css
----script.js
----controller.js

The “index.html” file is a simple HTML Sign Up Form that accepts user input for “Email”, “Password” and “Confirms Password”. We will be validating the input typed by the user in these fields and display an error accordingly. You can find the starter “index.html” and “styles.css” files that I created for this project down below:

Starter Template

As you can see from the “index.html” file, I have created multiple <p></p> tags with “error ids” which will be used to display error messages as the user enters information onto the input field.

Note — In the “index.html” file, we have imported our “script.js” file as a “module” since we will be using functions declared on our “controller.js” file.

Password Validation

Let’s dive in and implement our first validation function for the “Password” input field. The reason I am explaining Password Validation first is that it covers a lot of input conditions as compared to Email Validation and Confirming Password.

The password text entered by the user must adhere to the following standards:

-> Should contain atleast 1 digit - Regex = /(?=.*\d)/
-> Should contain atleast 1 lowercase - Regex = /(?=.*[a-z])/
-> Should contain atleast 1 uppercase - Regex = /(?=.*[A-Z])/
-> Should contain atleast 8 characters - Regex = /[a-zA-Z0-9]{8,}/

We will be using the Regex corresponding to each condition to check whether the password text adheres to all the stated conditions. Let’s look at the code for Password Validation and I will walk you through different aspects of the code that make it happen!

We start by selecting the HTML Elements corresponding to “Password Input” and “Password Error”. Initially, we also set the display property of the “Password Error” element to “none” so that the tag is not visible unless there is an error in the input. We then add a “keypress” event listener to the “Password Input”. The “keypress” event listener fires up the callback function every time the user hits a key on the keyboard and we will be using this callback function to dynamically validate password input as the user types.

Note — When you console.log the “password value” on every keypress, you will observe that the value does not include the last key/letter/symbol as entered by the user. In order to bypass this behavior, we combine the “password value” with the “event key” responsible for firing up the event.

In the “controller.js” file, our “pswdCheck” function accepts 2 parameters which are “input text” and the corresponding “error element”. We use the input text to match with our different regex conditions and conditionally alter the text displayed in the corresponding “error element”. Since we had modified the “error element’s” display to “none”, we will also switch the “error element’s” display type to “block” to display the error text if the input text does not match any particular Regex condition. If all of the Regex conditions match, we reset the display property of the “error element” to “none” to hide it from the DOM.

Email Validation

Similar to how we implement “Password Validation” we can also apply the same concept to “Email Validation”. The corresponding Regex expression to check the validity of an email is as shown below:

Email Regex - /^[^\s@]+@[^\s@]+\.[^\s@]+$/

Since we just have a single Regex condition for validating our email, it is much simpler to implement than “Password Validation”. Take a look at the code block below:

As you can see from the block of code displayed above, you can implement “Email Validation” in a similar way using a single conditional statement that checks whether the input text matches the email Regex expression and modifies the corresponding “error element” accordingly.

Confirm Password Validation

Although validating the “Confirm Password” input field won’t be the same as validating the email and password using Regex, but at this point, you should have a pretty good idea of how you can implement validation for the same.

So for validating the “Confirm Password” input field, we acquire an additional parameter which is the “Password” field value, and pass it to the “confirmPasswordCheck” controller function. The “confirmPasswordCheck” controller function compares text in the “Confirm Password” and “Password” input fields and renders error messages accordingly using the same concept that we used for password and email validation.

Conclusion

Although many state management solutions allow developers to dynamically update the DOM as per the user input, it is interesting and also challenging to implement the same concept using Vanilla JavaScript as per the validation requirements. Hopefully, this article will give you a good idea of implementing client-side validations without the use of any external framework or library. You can find the source code for this project here.

Feel free to look into my other blog posts in “The JavaScript Ecosystem” Series

  1. Vanilla Web Components in JavaScript
  2. Build your own Web CV using Aurelia

Signing off for this post. See you guys in the next one. Stay safe, take care, and keep learning!

The Startup

Get smarter at building your thing. Join The Startup’s +794K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Mrunal Salvi

Written by

Software Developer — Sharing my Lines of Code

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +794K followers.

Mrunal Salvi

Written by

Software Developer — Sharing my Lines of Code

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +794K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store