required
Requires a value before submission.
Platform under construction
Form Validation
Form validation checks whether input is acceptable before the application trusts or submits it.
if (!form.checkValidity()) {
form.reportValidity();
return;
}
Events & Forms
Use native validation first, then add custom rules where needed.
HTML validation attributes such as required, minlength, type and pattern provide a strong first layer.
JavaScript can call checkValidity, reportValidity and setCustomValidity to integrate custom validation with browser behavior.
Validation is not security. The server must validate again. Client-side validation is for faster feedback and better usability.
type
Adds built-in rules for email, url, number and more.
checkValidity
Returns whether the form or field is valid.
setCustomValidity
Sets a custom validation message.
Examples
Event code should respect how people actually use the interface.
Combine native rules with custom validity
function validateTitle() {
title.setCustomValidity(title.value.trim().length < 3 ? "Use at least 3 characters." : "");
}
Showing custom text but leaving the form valid
error.textContent = "Title is too short"; // The browser still thinks the field is valid.
Code patterns
Reusable examples for quick reference.
These examples are the event patterns you will reuse constantly: listen, inspect, prevent, delegate, validate and submit.
Check form validity
Use the browser validation model.
if (!form.checkValidity()) {
form.reportValidity();
}
Custom message
Set an error string or clear it with an empty string.
field.setCustomValidity("Choose at least 8 characters.");
field.reportValidity();
Clear custom validity
Always clear when the value becomes valid.
field.setCustomValidity("");
Validate on input
Give feedback as values change.
field.addEventListener("input", validateField);
Rules that matter
Make interaction predictable.
Events are user-facing code. Good handlers stay small, respect native behavior and keep visual, semantic and data state aligned.
Start with HTML attributes
required and type cover many common cases.
Use the Constraint Validation API
It integrates with browser validation.
Clear custom errors
A stale custom error keeps the field invalid.
Validate again on the server
Client validation can be bypassed.
Write helpful messages
Tell users how to fix the field.
Move focus thoughtfully
Help users find the invalid field without trapping them.
Production thinking
Strong event handling makes an interface feel reliable instead of accidental.
Why does this matter?
Validation is where data quality, user experience and security boundaries meet.
Accessibility
Errors should be associated with fields and written in clear language.
Production note
Production forms need both client-side feedback and server-side enforcement.
SEO note
Validation quality affects conversion and trust more than ranking directly.
Live code lab
Change the HTML, CSS or JavaScript and run the result.
The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.
Mini assignment
Try this now.
- Change minlength to 6.
- Add a second field with type="email".
- Clear the output when the user types again.
Practice assignment
Do this before moving to the next topic.
- Add native validation attributes.
- Write one custom rule.
- Use checkValidity and reportValidity.
Try it yourself
Add custom form validation
Self-check
Before you continue, prove that you understand Form Validation.
If you can explain what fires, where it fires and what default behavior remains, you understand the interaction.
- Can you explain native form validation?
- Can you explain checkValidity?
- Can you explain reportValidity?
- Can you explain setCustomValidity?
- Can you explain why the server must validate too?
Chapter checkpoint
Events & Forms checkpoint
Finish this chapter by turning the lessons into a small practical proof.
Build
Create a form with validation, status feedback and keyboard-friendly submit behavior.
Deliverables
- labels
- submit handler
- error message
- success message
Quality checks
- keyboard flow works
- errors are visible
- status is announced or clearly shown
Review question
Can a user complete the form without a mouse?