Intermediate level · Module 5: Connecting Front End and API · Lesson 2 of 3
Submitting Forms and Showing Server Errors
Send form data to the API, show progress and display server-side validation errors next to the right fields.
In this lesson you will
- Submit forms through the API client
- Map server field errors to form fields
Key concepts
POST with JSONsubmitting statefield error mappingsuccess feedback
The lesson
On submit, disable the button and show 'Sending…', call createEnquiry with the form data, then either show a confirmation or the errors. Disabling the button prevents double submissions on slow networks.
When the server returns 400 with field errors, map them to the form so each message appears next to its field, exactly as client-side messages do. Users should not see technical messages.
If the server is unreachable, keep the user's input, explain the problem and let them try again — losing a long form is very frustrating.
Step by step
- Submit the enquiry form through the API client.
- Disable the button while sending.
- Show server field errors beside the fields.
- Keep the form data when the server is down.
Practice activity
Complete the enquiry flow from the practical activity.
Expected result: Successful, invalid and failed submissions each give the right feedback and no input is lost.
Check your understanding
-
Why disable the submit button while sending?
Show answer
To prevent double submissions, especially on slow networks.
-
What should happen to the form data if the server cannot be reached?
Show answer
It should be kept so the user can try again.
Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.