Forms
Check input at the right moment and put server errors on the right field. Never lose what people typed, and save each form only once.
- Required 4
- Recommended 3
Required
Check every field on the server too
RequiredValidate every field on the server with the same rules the form uses, and treat the browser's checks as a convenience only.
Put server errors on their fields
RequiredWhen the server rejects a form, show each error next to the field it names. Show errors that name no field in a summary at the top of the form.
Never lose what people typed
RequiredKeep every value people entered after a failed submit, a lost connection, an expired session or an accidental reload. Never clear a form unless it was saved.
Save each form only once
RequiredMake a double click, a second Enter or a retry save the record once. Block repeat submits in the form and reject duplicates on the server.
Recommended
Check fields when people leave them
RecommendedCheck a field first when focus leaves it, then on every change once it shows an error, and check all fields on submit. Never show an error on a field nobody has touched.
Save drafts on their own
RecommendedWhen a screen saves without a button, save within 2 seconds of the last change and when the page is hidden. Show the save state in words, and never overwrite someone else's change.
Warn before leaving unsaved changes
RecommendedWhen a form has unsaved changes, warn before the tab closes or the app moves to another screen. Never warn when nothing changed.
For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers app interface playbook: https://agentwranglers.se/playbook/app-ui/forms.