Tutorial JavaScript/Regex: Client-side input validation part 2 (free source code)

Validating data input directly within the context of the web browser both improve the user experience and reduce the workload of your web server.

Validating the input of a textbox reduces the odds of errors by accepting only precise data format of dates or phone number while accompanying the user as he/she types on his/her keyboard.

The data validation, with either function (such as when you want to validate barcodes) and regular expressions, allow validating the user input a second time before sending the data to the web-server in order to be validated a third time, processed, and saved.

In this tutorial, I will teach this dual validation strategy allowing you to reduce input errors while maximizing the user experience. Now, we got to be careful because over restrictive validations can be frustrating for your legitimate users if they cannot type valid data such as their own postal code or their email address.

This tutorial in two parts will teach you:

– How to improve the basic textboxes existing in HTML5.

– How to evaluate which controls are supported by which web browser.

– How to implement validations when none are offered by default.

– How to evaluate the pertinence of functionality in terms of costs and development time versus the return on investment.

– How to implement simple but efficient validations when you don’t have much time to invest in a given functionality.

– How to implement complex validations through concrete examples.

– How to determine when excessive validation becomes counter-productive and reduce the user-experience to such an extent that perspective and full-fledged customers give-up doing business with you.

– How to evaluate properly how much effort should be invested to maximize the end result while minimizing the development time (and management time afterward).

In this second part (advanced), we will explore the following examples:

– Postal code and code zip

– Phone numbers

– Emails

– IPV4/IPv6

– Colors and gradients

In this second part, I will assume that you already understand the content of the first part to keep this lesson as short as possible. In any case, the code examples (both beginner and advanced) are meant to be “plug and play”. Therefore, you can simply copy/paste the input in any of your projects as long as you also include the proper JavaScript file (.js).

You can use freely all the presented source code in all your personal and professional projects without any restriction or copyright. This project represents about 30 hours of development for a seasoned programmer.

If this tutorial was useful, don’t hesitate to like, comment, and share it with your friends.

PS: Don’t simply download the source code. Don’t get disappointed just because I am not a native English speaker. Watch the whole video! I give you hundreds of dollars of recommendation and advice (not included in the source code) about software project management and software commercialization freely during my tutorials. Enjoy it!

Thank you and have a nice day,
Jonathan Parent-Lévesque from Montréal

Code source: https://drive.google.com/open?id=1UiXictGZhFUTmqPsNbv9baefQYEwCkAh

Notepad++: https://notepad-plus-plus.org/