HTML Form Validation

Introduction to HTML Form Validation

Form validation ensures that the data submitted by users meets certain rules before it is sent to the server.

HTML5 introduced built-in form validation attributes, making it easier to validate user input without JavaScript (though JS can be used for advanced validation).

Types of HTML Form Validation

1. Required fields – Ensure users don’t leave fields empty
2. Type validation – Check the format of input (email, number, URL, etc.)
3. Length validation – Minimum and maximum length of text
4. Pattern validation – Custom rules using regular expressions
5. Range validation – Numbers or dates within a range

1️⃣ Required Fields

Use the required attribute to make a field mandatory.

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

• Browser will prevent submission if the field is empty
• Shows default tooltip: “Please fill out this field.”

2️⃣ Type Validation

Some input types automatically validate user input:

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

• Invalid email: abc → browser shows an error
• Valid email: abc@example.com

3️⃣ Length Validation

Use minlength and maxlength attributes:

<label for="password">Password:</label>
<input type="password" id="password" name="password" minlength="6" maxlength="12" required>

• User must enter 6–12 characters

4️⃣ Pattern Validation (Regular Expression)

The pattern attribute allows custom rules:

<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{10}" required>

• Only allows exactly 10 digits
• Shows error if input doesn’t match

Example for password with at least 1 uppercase, 1 lowercase, 1 number, 6–12 chars:

<input type="password" name="password" 
       pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,12}" 
       title="6-12 chars, at least 1 uppercase, 1 lowercase, 1 number" 
       required>

5️⃣ Range Validation (Numbers & Dates)

Use min and max attributes:

<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18" max="60" required>

• Only allows numbers between 18 and 60

For dates:

<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" min="2000-01-01" max="2025-12-31">

Validation Messages (Custom Tooltip)

Use title to provide custom instructions:

<input type="text" name="username" required pattern="[A-Za-z]{3,10}" title="3-10 letters only">

• Shows custom tooltip if input doesn’t match pattern

Example: Complete Form with HTML Validation