HTML Form Validation
Ensuring data quality with built-in validation
✅ What is Form Validation?
Form validation ensures users enter correct and complete data before submitting forms. HTML5 provides built-in validation features.
<form>
<input type="email" required>
<button type="submit">Submit</button>
</form>
Output:
Built-in Validation Types
Required
Field must be filled out
<input type="text" required>Must be valid email format
<input type="email" required>Number Range
Must be within specified range
<input type="number" min="1" max="10">Length
Must meet length requirements
<input minlength="8" maxlength="20">🎯 Pattern Validation
Use regular expressions for custom validation patterns:
<!-- Phone number pattern -->
<input type="tel"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
title="Format: 123-456-7890"
placeholder="123-456-7890">
<!-- Username pattern -->
<input type="text"
pattern="[a-zA-Z0-9]{3,16}"
title="3-16 characters, letters and numbers only"
placeholder="username">Output:
📝 Complete Validation Example
A registration form with multiple validation rules:
<form>
<!-- Required email -->
<label>Email:
<input type="email" required>
</label>
<!-- Password with minimum length -->
<label>Password:
<input type="password" minlength="8" required>
</label>
<!-- Age with range -->
<label>Age:
<input type="number" min="13" max="120" required>
</label>
<!-- Terms checkbox -->
<label>
<input type="checkbox" required>
I agree to terms
</label>
<button type="submit">Register</button>
</form>Output:
🚫 Disabling Validation
Sometimes you need to bypass validation:
<!-- Disable validation for entire form -->
<form novalidate>
<input type="email" required>
<button type="submit">Submit</button>
</form>
<!-- Disable validation for specific button -->
<form>
<input type="email" required>
<button type="submit">Submit</button>
<button type="submit" formnovalidate>Save Draft</button>
</form>