A custom rule with setCustomValidity
checkValidity() fires invalid on each bad field before returning false. Try typing different passwords yourself and pressing the button: the browser shows your message in its bubble.
input fires on every change to a field's value, change fires when a change is committed, and submit fires on the form; FormData collects every named field in one step, and the Constraint Validation API (checkValidity, setCustomValidity, validity) lets JavaScript add its own rules and messages to the browser's built-in ones.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make a <textarea id="bio" maxlength="160"> with a #left paragraph that shows how many characters are left, updated as the user types. Test by setting a value and dispatching input.
Write a submit handler for a form with fields title and tags (several checkboxes) that logs { title, tags }, with tags as an array.
Explain it without notes
What is the difference between the input and change events?
How does FormData decide which fields to include?
How do you add a custom validation rule, and what's the common mistake?
Why validate on the client if you must validate on the server anyway?
Preview
Console
Nothing logged yet.Expected console output
invalid: confirm | customError: true | Passwords don't match
valid? false
valid now? true
submitted!