Form validation has always been tricky and painful for developers since the Web was born. Before HTML5, it was a nightmare for developers to write lines of code for validating forms to get the desired information from the user.
In this chapter, we will cover the following topics:
- Validation, their benefits, and their types
- HTML5
<input>and attributes used in validations - The difference between JavaScript and HTML5 validations with an example
- Validation constraints and supported APIs (Application Programming interface)
- Default error messages displayed by the browser
Validation of a form is a series of checks and notifications that guides a user as to what is required as an input while submitting information to a server. We can also say that it is a process of checking the input data against a specific standard or requirement.
Form validation is a process for detecting invalid control data and displaying those errors to the end users. The term has several benefits as follows:
- Provides the necessary instructions and hints
- Provides a logical reading and navigation order of the elements
- Users can easily get to know the mistakes they have made while entering the data
- Ensures that the form can be completed and submitted using the keyboard
- Saves users' waiting time on an HTTP request or a network call
- Saves the owner's server time and memory from dealing with bad inputs
Validation ensures that sufficient data has been provided by the user, such as with online shopping, which typically includes the address, e-mail address, and many more details which are mandatory for a transaction to be complete.
There are many methods to perform form validations, which can be categorized into the following:
- Client-side form validation
- Server-side form validation
Client-side validation can be performed using HTML5 attributes on a browser that supports them or even with the help of JavaScript for other browsers. HTML5 attributes reduce the effort of validation in comparison to cumbersome JavaScript validations.
The advantages of client-side form validation are as follows:
- It enhances the experience of the user by responding quickly at the client side itself
- Validation can occur as the
<form>controls are filled by the user before submitting the form to the server - This approach is quite simple as it ensures that the user has filled the required fields with valid data and also guides the user while filling up the form correctly
- It's a fast form of validation as it does not require any server-side scripting
The disadvantages of client-side form validation are as follows:
- It can be disabled in the client's browser and does not provide any security mechanism
- This approach cannot protect our application from various security concerns while transmitting the data along the network
- Client-side validation provides minimum security as it can be altered or bypassed very easily
Various scripting languages, such as PHP, ASP, or Perl are used to screen and filter the data submitted by the user at server side.
This approach is used when we know that some checks can be performed only on the server side as security is required, as in the case of online shopping, where the user enters card details for making a payment.
The advantages of server-side form validation are as follows:
- The valid and complete information can be submitted without any error recovery messages and warnings.
- Every page that a user sees in the browser is downloaded to the computer, which includes JavaScript that has validation code. So, a hacker can create a new version of the page without any validation and can fool our server by entering invalid data. In such scenarios, server-side validations are helpful.
- Server-side validation is more secure and cannot be altered or bypassed easily.
The disadvantages of server-side form validation are as follows:
- This approach requires more response time leading to poor user experience
- The server-side processing code resubmits the page so as to display the error messages
- To have the minimum number of request-response life cycles, it validates all form fields at the same time
More or less, we all have relied on JavaScript to validate forms. Also, we should always keep in mind that client-side form validation is not a replacement for foolproof server-side validation and handling errors. It is an efficient means of providing an instant feedback on the input of the user at the client end. In case of online shopping, the user selects total number of pieces, but after a certain limit, the user sees an error that the limit has been exceeded. All these validations demand high-end server-side validations, which is not possible on the client side. Always remember, in case of forms, use server-side validations.