input versus change
Type in the box yourself: input fires on every key, change only when you click or Tab away after changing it.
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
input: A | inputType: insertText
input: An | inputType: insertText
input: Ann | inputType: insertText
change: Ann
size change: M
gift input: true
gift change: true