Broken & Failing Forms
What forms look like when validation fails, the backend rejects the submission, or feedback is slow. The states most developers test last.
Multiple field validation errors
The user submitted a form with several invalid fields. Every error needs to be visible at once — both in a summary at the top and inline next to each field. Showing only inline errors forces the user to scroll and hunt.
3 errors need to be fixed
- • Full name is required
- • Email address is invalid
- • Password must be at least 8 characters
Full name is required.
Please enter a valid email address.
Password must be at least 8 characters.
Show when a form submission fails client-side validation on multiple fields. Always show a summary banner at the top AND inline errors on each field. The banner tells them how many issues exist; the inline errors tell them what to fix.
Backend rejection — server-side validation
The form passed client-side validation but the server rejected it. The error might be a uniqueness constraint, a business rule, or a rate limit. The user already waited for the submission — now they need to know what went wrong without losing their data.
Server rejected your submission
The subdomain "acme" is already taken. Please choose a different one.
This subdomain is already taken.
Try: acme-inc, acme-team, acme-hq
Show when the server returns a 422 or 400 with field-level errors. Map server errors back to the correct fields. If the server returns a generic error, show it as a banner. Never clear the form.
Async field validation — slow feedback
A field requires server-side validation (checking if a username is available, verifying an email domain). The validation is slow — the user typed something and is waiting for feedback. Show them the validation is happening.
Three states of async field validation:
Checking availability...
Username is available!
Username "admin" is already taken.
Show a loading spinner inside or next to the field while async validation is running. Show the result (valid/invalid) as soon as it returns. Don't block form submission while a non-critical field is validating.
Unsaved changes — navigation guard
The user made changes to a form but is trying to navigate away without saving. This is one of the most common data-loss scenarios in admin tools. A browser beforeunload event isn't enough — you need an in-app confirmation.
Unsaved changes
You have unsaved changes on this page. If you leave now, your changes will be lost.
Show when the user clicks a navigation link or the back button while a form has unsaved changes. Use a modal, not a browser dialog — browser dialogs can't be styled and feel broken.
Field constraints — character limits and format hints
Fields with constraints (character limits, specific formats, conditional requirements) need to communicate their rules before the user makes a mistake — not after. Proactive hints prevent errors.
Letters, numbers, and hyphens only
21/50
Approaching character limit
189/200
Over the character limit
132/120
Show character counts, format hints, and requirements below or beside the field at all times — not just on error. Update the character count in real-time. Change color when approaching the limit.