What not to do while validating forms JavaScript

What not to do while validating forms JavaScript

1. Stop Throwing Errors When Your User Is Typing

It’s important to respect what your user types. In 90% of scenarios, users are running on a happy autopilot (and they’ll definitely be typing the correct thing).

This is image title

Consider the above scenario (Figure 1) — a user is in the process of keying in a correct email address, but the form tries to validate on key press. Why should the form throw an error message when the user is typing a correct address?

  1. Avoid key-press validation for email, names, and contact numbers. Rather, validate them on blur or change.

  2. For fields like password, validate the constraints on key press. Example: Your password constraint might include a lowercase, uppercase, number, and symbol. In such scenarios, highlight the user’s progress on key press. This will help them.

This is image title

Throwing error messages while typing will usually shift the user’s focus from their input to the error block. Take care before you show an error message.

2. Avoid Showing Consolidated Error Messages at the Top or Bottom of the Form

Preference highlighting the error messages nearer to the input fields rather than showing them at the top or bottom of the form.

If your form is too long, then it may be difficult for users to scroll and find out what went wrong.

While designing, consider people from different age groups. The elderly and people who are using your application for the first time might find it difficult to guess what went wrong.

For lesser than three fields, if the situation demands, it’s OK to show consolidated messages in one place. Make sure the error messages are within the user’s visibility.

3. Show Error Messages Then and There

Don’t wait for the user to complete the entire form to highlight what went wrong. Once the user moves out of a field, validate it, and show warnings or errors if necessary.

This is image title

Why should we surprise the user in the end?

Figure 3 shows an example of how the form validates only when the user clicks Register. Until the last click, the user may not be aware of the errors they have committed. It’d be better if the form had validated on blur of the input.

When you save your validation errors till the user submits the form, it can be time consuming for the user to revisit and refill in the form. Also, depending on the value in one field, users might tend to change other fields as well. By delaying the validation, you are simply prolonging the form completion time.

4. Remove Existing Error Message(s) When the User Starts Typing Again

When the user types again to correct his previous mistake, guide him. Don’t let the error stay until the user keys in a correct input.

When not cleared, the user will be confused about whether what he’s typing is right or wrong.

5. Don’t Blame Your Users, Guide Them

Users are always correct. Provide a gentle message rather than a strong one.

Icons are preferable to highlight what’s right and wrong. Again, use a gentle icon to highlight. Choose a warning icon over a cross icon to highlight errors. (See Figure 3 for an example of a warning icon.)

Save the user from committing an error by using appropriate input types.

Example: Use if you wish users to enter only numbers in a particular field. Do not use in the above case and then wait for the user to enter into the error zone. Be wise in choosing your input type.

6. Provide an Option to Clear or Reset Form Errors

Finally, always have buttons to clear, reset, and/or close the form. User freedom is important, and it shouldn’t be time consuming.

Thanks for reading !


Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

Data Types In JavaScript

JavaScript data types are kept easy. While JavaScript data types are mostly similar to other programming languages; some of its data types can be unique. Here, we’ll outline the data types of JavaScript.

JavaScript Memory Management System

The main goal of this article is help to readers to understand that how memory management system performs in JavaScript. I will use a shorthand such as GC which means Garbage Collection. When the browsers use Javascript, they need any memory location to store objects, functions, and all other things. Let’s deep in dive that how things going to work in GC.

Create a Line Through Effect with JavaScript

In this post we are going to create an amazing line through effect, with help of CSS and lots of JavaScript. So, head over to your terminal and create a folder LineThroughEffect. Create three files -index.html, main.js and styles.css inside it.

Grokking Call(), Apply() and Bind() Methods in JavaScript

In this article, we will have a look at the call(), apply() and bind() methods of JavaScript. Basically these 3 methods are used to control the invocation of the function.