Mini build: a contact form that sends
Build a working contact form with a name input (id="name", name="name"), a message textarea (id="message", name="message") and a submit button (id="send").
On submit, validate: the name is required (Enter your name. in p#name-error) and the message needs at least 10 characters after trimming (Write at least 10 characters. in p#message-error). Errors appear after the first submit and update as the user types. Invalid fields get aria-invalid="true". Nothing is sent while there are errors.
When valid, send with the provided fakeSend (it takes 300 ms). While sending, the button is disabled and reads Sending…. Afterwards show <p id="status">Message sent!</p>, empty both fields, hide the errors, and put the button back to Send.
What Check tests
- An empty submit shows both errors and sends nothing
- Invalid fields are marked with
aria-invalid - Errors update as the user types
- While sending, the button is disabled and says
Sending… - After sending: success message, empty fields, button back to
Send
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Your page
Console
Nothing logged yet.