HTML Form Validation

Understanding HTML Form Validation

HTML provides built-in form validation features that can check user input before a form is submitted.

Validation attributes can require a value, limit its length or numerical range, check its format, and take advantage of rules built into certain input types.

Browser Validation

Browsers can automatically check many common form requirements before allowing normal form submission. These checks are known as client-side validation because they occur in the user's browser.

<input type="email" name="email" required>

In this example, the field must contain a value and that value must satisfy the browser's basic requirements for an email address.

Required Fields

The boolean required attribute indicates that a form control must contain an acceptable value before the form can be submitted normally.

<label for="first-name">First Name:*</label>
<input type="text" id="first-name" name="first-name" required>

If the user attempts to submit the form without completing the required field, the browser prevents normal submission and displays a validation message.

Input Type Validation

Some input types provide built-in validation rules. For example, type="email" expects an email address, while type="url" expects a URL.

<label for="email">Email:*</label>
<input type="email" id="email" name="email" required>

<label for="website">Website:</label>
<input type="url" id="website" name="website">

Using the input type that matches the information being collected gives the browser more information about the expected value and can also provide a more appropriate input interface on some devices.

Minimum and Maximum Length

The minlength and maxlength attributes can specify minimum and maximum lengths for text-based form controls.

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

In this example, the username must contain at least four characters and cannot contain more than twenty characters.

Minimum and Maximum Values

The min and max attributes can define the acceptable range for input types that support numerical or date-based limits.

<label for="number-input">Number:</label>
<input type="number" id="number-input" name="number-input" min="1" max="10">

Here, values below 1 or above 10 do not satisfy the input's validation constraints.

Pattern Validation

The pattern attribute defines a pattern that the entered value must match for supported input types.

<label for="tel-input">Phone:</label>
<input type="tel" id="tel-input" name="tel-input"
  required
  maxlength="10"
  pattern="[0-9]{10}"
  placeholder="1234567890"
  title="Please enter a 10-digit phone number with numbers only.">

This example from the master form requires a 10-digit phone number containing numbers only. The pattern attribute checks the required format, while maxlength prevents additional characters from being entered.

Validation Messages

When a control does not satisfy its validation requirements, the browser can display a message explaining that the value needs attention.

The exact appearance and wording of built-in validation messages can vary between browsers. Clear labels, instructions, and requirements should therefore explain what users need to enter without relying entirely on the browser's message.

Server-Side Validation

HTML validation improves the user experience, but it should not be the only validation performed on submitted data. Client-side validation can be bypassed or altered before information reaches the server.

The server should independently validate submitted values before storing, processing, displaying, or otherwise using them. HTML validation helps the user enter appropriate data; server-side validation protects the application and its data.

Form Validation Example

The following example uses validation rules from the master form. Try submitting the form with empty required fields, an invalid email address, or a phone number that does not contain exactly 10 digits.

Form Validation Best Practices

• Use the input type that best represents the information being collected.
• Use required only for information that must be provided.
• Clearly identify required fields and explain formatting requirements.
• Use minlength, maxlength, min, max, and pattern only when those restrictions are meaningful.
• Do not rely solely on placeholder text to explain validation requirements.
• Make validation errors understandable and give users enough information to correct their input.
• Always validate submitted data on the server even when HTML validation is used.

Summary

HTML form validation can check common input requirements before data is submitted. Attributes such as required, minlength, maxlength, min, max, and pattern work with appropriate input types to define acceptable values.

Built-in browser validation can make forms easier to complete, but submitted data must still be validated on the server because client-side validation alone cannot be trusted to protect an application.