HTML Form Validation Cheat Sheet

Apr 10, 2026

When I build a contact form or a complex application, I ensure that users enter the correct data that helps data accuracy and proper user experience.

In this article I am sharing a complete collection of commonly used HTML form validation patterns, attributes, and examples.

1. Basic Pattern Validations

Only Alphabets

<input type="text" pattern="[A-Za-z\s]+" title="Only alphabets allowed">

Only Numbers

<input type="text" pattern="[0-9]+" title="Only numeric digits allowed">

Exactly 10 Digits (Mobile)

<input type="text" pattern="\d{10}" maxlength="10"
oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0,10);"
title="Enter exactly 10 digits">

Alphanumeric

<input type="text" pattern="[A-Za-z0-9]+" title="Only letters and numbers allowed">

Alphabets + Comma

<input type="text" pattern="[A-Za-z\s,]+" title="Only alphabets and commas allowed">

2. Common Real-World Validations

Email

<input type="email" required>

Custom Email Pattern

<input type="text" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">

Strong Password (Minimum 8 characters and at least 1 uppercase, lowercase, number, special character)

<input type="password"
pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&]).{8,}"
title="Min 8 chars, include uppercase, lowercase, number & special char">

PAN Card (India)

<input type="text" pattern="[A-Z]{5}[0-9]{4}[A-Z]{1}" maxlength="10"
title="Enter valid PAN (e.g. ABCDE1234F)">

Aadhaar Number

<input type="text" pattern="\d{12}" maxlength="12"
title="Enter 12 digit Aadhaar number">

IFSC Code

<input type="text" pattern="[A-Z]{4}0[A-Z0-9]{6}" maxlength="11"
title="Enter valid IFSC code">

URL

<input type="url">

3. Length Validation

<input type="text" minlength="3" maxlength="20" required>

4. Number Range

<input type="number" min="1" max="100">

5. Date Validation

<input type="date" min="2020-01-01" max="2030-12-31">

6. Custom Formats

PIN Code (India)

<input type="text" pattern="\d{6}" maxlength="6"
title="Enter valid 6 digit PIN code">

Username (No Spaces)

<input type="text" pattern="[A-Za-z0-9_]{4,15}"
title="4-15 characters, no spaces">

Name (No Numbers)

<input type="text" pattern="[A-Za-z\s]{2,50}">