required
The field must have a value before submission.
Platform under construction
Form Validation
Learn Form Validation with practical examples for form structure, input behavior, validation, autocomplete, accessibility, backend safety and live practice.
HTML forms
HTML validation helps users correct mistakes before the server receives the form.
Browsers can validate forms with attributes such as required, minlength, maxlength, min, max, step and pattern.
Native validation is useful because it is fast, accessible when used well and works without writing JavaScript for every basic rule.
Validation should help, not punish. Explain what is expected, keep messages clear and always repeat validation on the server.
minlength
The text must contain at least a set number of characters.
pattern
A regular expression for specific formats. Use carefully.
novalidate
Disables native validation on a form when custom handling is needed.
Syntax and behavior
Validation attributes belong on the control they describe.
Start with simple native constraints. Add JavaScript only when the interaction genuinely needs more.
Helpful constraints with visible instructions
<label for="code">Access code</label>
<p id="code-help">Use 6 uppercase letters or numbers.</p>
<input
id="code"
name="code"
type="text"
minlength="6"
maxlength="6"
pattern="[A-Z0-9]{6}"
aria-describedby="code-help"
required
>
Validation without context
<input name="code" required pattern="[A-Z0-9]{6}">
<p>Error</p>
Rules that matter
Forms should guide users clearly and protect the backend carefully.
Strong form markup is readable, accessible, secure by design and easy to connect to real server-side validation.
Use required only when truly required
Do not force unnecessary fields.
Explain unusual formats
Pattern rules need visible help text.
Avoid hostile regex
Complicated patterns often reject valid real-world input.
Use min and max for numeric ranges
Match the rule to the input type.
Do not rely on client validation
Users can bypass browser validation.
Make errors actionable
Tell users exactly what to fix and where.
Production thinking
Forms connect frontend quality with backend responsibility.
Why does this matter?
This matters because validation is part of the conversation with the user. Bad validation makes users feel like the website is fighting them.
Accessibility
Connect instructions and errors with aria-describedby so the message belongs to the right field.
Production note
Backend validation is mandatory. Client validation improves UX; server validation protects the system.
SEO note
Helpful validation reduces form abandonment after SEO traffic reaches a conversion page.
Live code lab
Change the code and run the example.
Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.
Mini assignment
Try this now.
- Add minlength="2" to a name field.
- Add a visible help text and connect it with aria-describedby.
- Explain why the same rule must also exist on the server.
Practice assignment
Do this before moving to the next lesson.
- Build a form with three validation attributes.
- Write helpful instructions for the strictest field.
- Describe one valid value and one invalid value for each rule.
Try it yourself
Add native validation
Self-check
Before you continue, prove that you own this lesson.
Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.
- Can you explain what problem this lesson solves in a real website?
- Can you identify the most important tag or attribute from this lesson?
- Can you name one accessibility mistake this lesson helps prevent?
- Can you write one good example and one weak example without copying the page?
- Can you explain when you would use this in production and when you would avoid it?