Client-Side Form Validations with HTML and JavaScript: Part 1

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.

Prerequisites

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.

1. 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.

2. Client-side Validation: In client-side validation, the validation is performed on the client side(in the browser) using JavaScript or HTML5. This method is faster and more responsive as it doesn't require a round-trip to the server. However, it can be less secure as the validation can be bypassed by a knowledgeable user.

3. 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.

• Form validation using JavaScript.

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

• required

• pattern

• min and max

• minlength and maxlength

Type Attribute

The 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:

<label for="email">Email:</label>
<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

The 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:

<label for="name">Name:</label>
<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

The 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:

<label for="username">Username:</label>
<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.

Min and Max Attributes

The min and max attributes are used to specify the minimum and maximum values for a number input. For example, you can use the min and max attributes to ensure that the input is within a specific range.

Here's an example of using the min and max attributes to ensure that the input is between 2 and 10:

<label for="visitors">Visitors:</label>
<input type="number" id="visitors" name="visitors" min="2" max="10" required />

Minlength and Maxlength Attributes

The minlength and 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 minlength and maxlength to constraint their text length.

Here is an example of an input element using the minlength and maxlength attributes:

<label for="username">Username:</label>
<input type="text" id="username" name="username" minlength="4" maxlength="30" required />

Conclusion

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:

• type

• required

• pattern

• min and max

• minlength and maxlength

In the second part of this series, we'll discuss how to perform form validation using JavaScript.