Form Validation - Counting Characters

For form validation, in addition to checking if any input field is empty, you can also check if the user's entered text is too short or too long.

For example, some applications require users to enter a long password (with a minimum number of characters for security reasons).

There are 2 ways you can do this character count validation:

By using the built-in "minlength" and "maxlength" attributes
Adding customized JS code

Option 1: Using the Required Attribute

You have to add the attributes. You type the attribute followed by the equal sign "=" and the number of the character you want to set (the number has to be in quotes ' ').
Example:

Below is the result:

Though this method is easy, it doesn't look great and it's not customizable. So, in order to create a good looking form validation, you need to add customized JavaScript codes. Let's see how to do it.

Option 2: Using the JS codes

Let's see how to validate a form and check for character count:

You check for the length of the value of input data

For example, consider an HTML form like this:

You can see there is an input field with an id of "name" and an error message space with an id of "name_error".

To add a validation that checks for the length of enter name, you would add the following JavaScript codes:
In this example, the name has to be at least 4 characters long but also less than 15 characters long.

Lesson 8: Form Validation - Character Count