Forms are an important part of a website. Different websites contain different types of forms, for example, registration, login, or feedback, etc. Data fields have certain constraints imposed upon them, for example, a minimum length, required, or a specific format, etc. These constraints make sure that the information entered is meaningful, and both the website and the client’s information remain secure.
Ensuring the required data is filled correctly is known as form validation. Form validation can be performed on the client-side or the server-side. Performing it only on the server-side can cause a significant delay as every time the user enters the data, it would first go to the server, and then the server will perform validation there. If the information is incorrect, the server would respond to it. As you can see, this puts an unnecessary burden on the server. Instead, we can perform the validation on the client-side using JavaScript. However, server-side validation is still necessary because malicious users can easily bypass client-side validation. One important thing to point out here is that HTML5 also provides form validation attributes, so why not just use them? First, the features provided by HTML5 are limited. If you want to add a customized validation, you cannot do it using HTML5, for example, to check whether the password and re-type password fields are equal. Second, the browser displays its default message when a form field is not in the required way. We cannot display a customized message. The HTML5 provides an attribute pattern to check a sequence of characters in an input field. As we all know, HTML5 provides the layout of the page. Adding complex patterns or logics in the HTML will not provide separation of concern. Therefore, to provide code readability and maintainability, validation should be separated from the layout.
Let’s now see different types of fields’ validation using JavaScript.
Required field
Most of the fields in our form need to be filled by the user. Therefore, we need to make sure that the user does not leave the field empty, i.e., make it required. Consider the following example to see how to do it.
In the above code, input fields name and email are required, and the field message is optional. When the user submits the form, the validate() method makes sure that the name and email are not empty. If either one of them is, it shows the relevant message and returns false. Otherwise, it gives an alert of Done and returns true. The form is only sent to the server when the validate() method returns true. Here in the action attribute, we have included the same HTML file for demonstration purposes. However, in practical cases, you will send it to the server.
Data Format
Here, we have to check whether the input data is correct or not. For example, the email address, phone number, or date should be in the required format. Since we need to detect a pattern in the entered data, regular expressions (or regex) can be used. To learn about them, visit JavaScript Regular Expression documentation. Let’s take an example to validate the email address.
Whenever the input field changes, two checks are performed, email should not be empty, and it should be in the correct format. The correctness of the email address is checked through a regular expression. Whenever the user does not provide an email address or in the incorrect form, the span element with email_err id shows the relevant message. The variable check remains false if the data format is incorrect. When the user enters the correct data, it becomes true, and the form can be submitted.
Numeric Value Validation
Some fields only require numeric data, such as age or zip code. Let’s validate such input fields.
This is almost the same as the previous example except for the regex. The regular expression checks that the string only contains the numeric value. If you are not comfortable with regex, you can use isNaN() method of JavaScript, which returns true if the variable does not represent a numeric value. Moreover, these two checks are not enough for the age (in years) field. For example, age cannot be zero, negative, or greater than a certain number, let's say, 125. Let’s add these constraints as well.
Confirmation Fields
This validation involves checking the two fields to have the same value. For example, a password field and a re-type password field both need to be equal.
When the user clicks the submit button, the validate() method is called. It first checks whether the two fields are empty or not. Then, it checks if they are equal. It shows an error message according to the unsatisfied condition.
Validate drop-down list
The following code checks that an empty value is not selected.
The above code shows an error message if the user selects an empty value.
The following code validates the input type radio.
See the Pen JjKVOvN by Amit (@amti_cd) on CodePen.
The above code displays an error if no value is selected. Similarly, you can validate the input type checkbox.
