📝 Phase 8 · Forms🟢 BeginnerMODULE 35 · FINAL LESSON
Form Validation
Course progress100%
🎯 What you'll learn: The browser's built-in validation system —
required, pattern, min/max, minlength/maxlength, and how to customize the messages users see.
Section 1
Why Use Built-In Validation?
HTML5 gives browsers the ability to check form data before it's ever sent to the server — no JavaScript required. This catches obvious mistakes instantly and gives users clear feedback, though server-side validation is still essential since client-side checks can always be bypassed.
⚠️
Never trust the client alone
HTML validation is a UX convenience, not a security measure — anyone can disable JavaScript or send raw requests that skip it. Always re-validate on the server too.
Section 2
required, pattern & type
You've already met required. The pattern attribute takes a regular expression the value must match, and specialized input types (like email) validate automatically.
validation-basic.html
HTML
<input type="email" name="email" required> <input type="text" name="username" pattern="[A-Za-z0-9_]{3,16}" title="3-16 letters, numbers, or underscores" required>
💡
title doubles as the error hint
When a pattern fails to match, most browsers show the title attribute's text in the validation popup — always pair pattern with a helpful title.
Section 3
min, max & Length Limits
Numeric and date inputs support min/max to bound the range. Text-based inputs support minlength/maxlength to bound character count.
validation-range.html
HTML
<input type="number" name="age" min="13" max="120" required> <input type="password" name="password" minlength="8" maxlength="64" required>
| Attribute | Applies to | Checks |
|---|---|---|
| required | Any input, select, textarea | Field isn't empty |
| pattern | Text-like inputs | Value matches a regex |
| min / max | number, date, range | Value falls within range |
| minlength / maxlength | Text-like inputs, textarea | Character count within bounds |
Section 4
Disabling Validation With novalidate
Sometimes you want to handle validation entirely with your own JavaScript. Adding novalidate to the <form> element turns off the browser's automatic checks.
novalidate.html
HTML
<form novalidate id="signupForm"> <!-- custom JS validation handles everything here --> </form>
🧩 Knowledge Check — Lesson 35
5 questions to test your form validation knowledge.
1. Is HTML's built-in validation a substitute for server-side validation?
2. What does the pattern attribute expect as its value?
3. Which attribute shows custom hint text when a pattern fails to match?
4. Which attribute pair bounds character count on a text input?
5. What does adding novalidate to a form do?
Coding Challenge — Lesson 35
Apply what you learned · Beginner Level
Final Challenge: Build a Validated Signup Form
Build a form with: an email input (type="email", required), a username input (pattern for 3-16 alphanumeric/underscore characters with a helpful title), a password input (minlength="8", required), and an age input (type="number", min="13", max="120").
Build a form with: an email input (type="email", required), a username input (pattern for 3-16 alphanumeric/underscore characters with a helpful title), a password input (minlength="8", required), and an age input (type="number", min="13", max="120").
💡 Show hints if you're stuck
- Username pattern:
pattern="[A-Za-z0-9_]{3,16}"
🏆
HTML Fundamentals Course Complete!
You've finished all 35 lessons of HTML Basics — from your first tag to fully validated forms. Ready to go deeper? The Advanced course covers semantic HTML, accessibility, SEO, and modern browser APIs.
Finished this lesson?
Mark it complete to track your progress.
Module 35 of 62Final Lesson — HTML Basics