Custom rules, :user-invalid and novalidate
:user-invalid stays off until you type in the email box and leave it. With novalidate, the submit event fires even though the form is invalid, so your own code must decide what to do.
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
customError: true | message: Passwords do not match
email :invalid? true | :user-invalid? false
submitted despite errors (novalidate). Valid? false
after fixing, customError: false