Build with AI: From Zero to Your First App · Module 5: Turn a page into an app · Lab
Per-Field Validation With Kept Values
35 min hands-on · Core
Browser only. The alert-and-clear form below is provided as starter material; convert it to per-field messages that keep values.
Three ways to do this lab. A: the browser steps below, the main path, free with no account. B: try the same task with your own AI tool if you have one (its terms and quotas apply). C: work from the provided material and the worked solution below, which teaches the same skill. No path claims you used a live AI tool when you did not.
Objectives
- Replace a single alert with per-field messages in field/rule/example shape
- Show all messages after one submit
- Preserve every entered value across failed submits
Step 1
Record the bad behavior
Submit the starter with an empty name and a past pickup time. Record what happens: one alert, cleared values, no field named.
order-form.htmlhtml FORM (alert-and-clear starter) Fields: name, pickup time. Behavior: single alert 'Invalid input' on any fault; all fields cleared after every submit.Step 2
Write per-field messages
Add a message line under each field in field/rule/example shape. Name: 'Your name is missing: write the name we should call out.' Time: 'Pickup time has passed: choose Friday 10:00 or later.' Keep all values on failure.
Step 3
Submit three faults at once
Submit with empty name, past time and empty items together. Confirm all messages appear at once and every typed value survives.
How to confirm it worked
- Per-field messages in field/rule/example shape under each field
- Multi-fault submit shows all messages together
- Entered values preserved after failed submit
- No alert remains in the flow
Try it here
0/3 checks passing · Coverage only, not a quality score.
The starter project is loaded below. Edit, preview with Run, then run the behaviour checks. No account needed; your draft stays in this browser.
Up to 10 files, .html/.css/.js only, 100 KB each. A failed import never touches your draft.
Draft kept in this browser.
Hints, in three stages
Stage 1: a nudge
One message per field, next to the field. The visitor fixes everything in one retry.
Stage 2: a direction
Keeping values is the feature visitors feel most. Never re-render a cleared form on error.
Stage 3: almost the answer
Add one warning case: 20 loaves allowed with a confirm-by-call note, to practice error versus warning.
Worked solution (open after an honest attempt)
Worked solution. Messages: name line, time line, items line, each field/rule/example. Submit with three faults shows three lines at once; values intact; retry with corrections succeeds. Warning added for 20-plus loaves: allowed with a call-to-confirm note.