Form validation is an essential aspect of web development as it ensures that the data submitted by users is accurate, complete, and secure. In simple terms, it checks whether the data entered by the user in a web form meets the required criteria or not. If the data is not valid, the form should not be submitted, and the user should be prompted to correct the errors.
In this 2-post series, we are going to look at types of form validation and 2 ways to perform client-side validation. This first part will cover how to use the built-in HTML5 attributes to perform form client-side validation. Let’s get started.
This tutorial assumes that you have a basic knowledge of HTML.
Types of Form Validation
There are 3 ways to validate a form, and each method has its advantages and disadvantages.
Server-side Validation: In server-side validation, the form data is submitted to the server, and the server-side script checks the data for errors. This method is reliable and secure as the data is validated on the server side. However, it requires a round-trip to the server, which can cause delays in the user experience.
Hybrid Validation: Hybrid validation is a combination of server-side and client-side validation. This method is the most reliable and secure as it combines server-side and client-side validation benefits. It provides a quick response to the user while ensuring the data is validated securely. Most modern websites use hybrid validation to validate user data.
Why Perform Client-side Validation
There are many benefits to performing client-side validation:
Improves user experience: Client-side validation can provide immediate feedback to the user about errors in their input. This helps users quickly correct mistakes and prevent them from having to wait for the server to respond with validation errors.
Reduces server load: Client-side validation can reduce the number of unnecessary requests sent to the server. This reduces server load and improves overall performance.
Reduces bandwidth usage: By reducing the number of requests sent to the server, Client-side validation reduces the amount of data that needs to be transferred over the network. This helps users with limited bandwidth or slow connections.
Provides security: Client-side validation prevents certain types of security vulnerabilities, such as SQL injection attacks, by rejecting invalid input before it is sent to the server.
Improves accessibility: Client-side validation improves accessibility for users with disabilities by providing immediate feedback about errors in their input.
Ways to Perform Client-side Validation
There are two ways to perform client-side validation:
Built-in form validation using HTML5 form validation attributes.
HTML5 Built-in Form Validation Attributes
HTML5 introduced a set of attributes that can be added to form elements to perform validation. These attributes are used to specify the type of input expected from the user, the required format, the minimum and maximum length, and other conditions that the input should meet. Some of these attributes include:
type attribute is used to specify the type of input expected from the user. For example, the
type attribute can be used to specify that the input should be an email address, a number, or a date.
Here’s an example for an email address input:
<input type="email" id="email" name="email" required />
The browser does an automatic validation on each of these input types.
type="email"causes the browser to validate that the input contains an "@" symbol and a domain name.
type="number"prevents the user from entering letters in the input field.
type="url"ensures that only text that matches the standard format for URLs is entered into the input box.
required attribute is used to specify that a field must be filled in before the form can be submitted. It is used with input elements such as text, email, and password.
Here's an example showing that the input field is required:
<input type="text" id="name" name="name" required />
The browser automatically checks if the name field has been filled in before submitting the form.
pattern attribute is used to specify a regular expression that the input should match. This attribute can be used to ensure that the input meets a specific format, such as a phone number, a postal code, or a username.
Here is an example showing that the username must be in lowercase:
<input type="text" id="username" name="username" pattern="[a-z]" required />
The browser submits the form if the username is lowercase, otherwise shows an error.
max attributes are used to specify the minimum and maximum values for a number input. For example, you can use the
max attributes to ensure that the input is within a specific range.
Here's an example of using the
max attributes to ensure that the input is between 2 and 10:
<input type="number" id="visitors" name="visitors" min="2" max="10" required />
maxlength attributes are used to specify the minimum and maximum length of text that can be entered into an HTML input field. All input fields that accept texts can use
maxlength to constraint their text length.
Here is an example of an input element using the
<input type="text" id="username" name="username" minlength="4" maxlength="30" required />
HTML form validation using attributes is a simple yet effective way to ensure that the data input by users meets the website's requirements. By using these attributes, you can specify the type of input expected, the required format, and other conditions that the input should meet. Some of the attributes we used are: