Every kind of validity problem
pw is only 3 characters but not tooShort: length rules only apply after the person edits the field, never to values from the HTML or from scripts. Press Send to see the browser's own message.
Attributes like required, pattern, min, max, step and minlength let the browser check values and block a bad submit with a helpful message, no JavaScript needed; but anyone can skip those checks, so the server must validate again.
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 5 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 form where username is required, 3–15 characters, lowercase letters and digits only.
Add CSS so invalid fields get a red border only after the person has interacted with them, and a green border when valid.
Explain it without notes
Why must the server validate data even when the form uses HTML validation?
List the main validation attributes and what each checks.
What is the difference between :invalid and :user-invalid?
How do you add a rule HTML attributes can't express, like matching passwords?
What do novalidate and formnovalidate do, and when would you use them?
Preview
Console
Nothing logged yet.Expected console output
fullname valueMissing: true
email typeMismatch: true
zip patternMismatch: true
age rangeUnderflow: true
qty stepMismatch: true
pw tooShort: false
invalid: fullname
invalid: email
invalid: zip
invalid: age
invalid: qty
form valid? false