Module · Frontend Engineer
Forms & Validation
One schema, validated on both sides, with errors the user can actually act on.
TOPIC 01
Client-Side Validation
The schema that describes the form, and the error messages it produces.
What you'll practice
- Write the Form Schema — guided · beginner
- Write Error Messages People Can Use — practice · intermediate
A command you'll meet
cat ~/app/forms/schema.tsA form is a conversation with the server. Open the task below for the full walkthrough.
Hands-On Tasks in This Topic (2)
Write the Form Schema
The schema is the single description of what the form accepts, shared by the interface and the server. Write it.
Write Error Messages People Can Use
An error message is a sentence about what to do next, tied to the field it belongs to. Write the strategy.
TOPIC 02
Server-Side Validation
The client is a convenience; the server is the authority.
What you'll practice
- Validate on the Server — practice · intermediate
- Design the Pending State — challenge · advanced
A command you'll meet
cat ~/app/forms/server-action.tsNever trust what arrives from a browser. Open the task below for the full walkthrough.
Hands-On Tasks in This Topic (2)
Validate on the Server
The client can be bypassed, so the server validates the same schema and maps the failure back to the form. Write the action.
Design the Pending State
Between the click and the answer there is a second of uncertainty, and the interface has to say something. Write the states the form moves through.