FORMS & TABLES

Form validation

When to check, where to show it and how to say it — rules, async and server errors, error summary and messages people can act on.
THEME
DENSITY
01

Playground

Timing, error display, icons and tone — live
PREVIEWSmart · inline · 0 shown
Create your accountTry “olivia” as a username or ben@gmial.com as an email.
This is your link: avava.studio/@you
The button never disables
Settings
VALIDATE
SHOW ERRORS
STATUS ICONS
TONE
Recommended: wait for the first blur, then update live so the error disappears the moment it’s fixed.
EVENT LOG
Type, leave a field or press Create account.
ACCESSIBILITY TREE
#emailinvalid=false
#userinvalid=false
#siteinvalid=false
#pwinvalid=false
#pw2invalid=false
02

Variants

8 kinds of rules
Required, length, patterncounter · phone · postcode
Include the country code
Email with typo checksuggests the right domain
Password & confirmlive checklist · strength · match
Numbers & rangeswarning that doesn’t block
Between $1,000 and $500,000
Datesnot in the past · after start
Async checkdebounced 700 ms · try “olivia”
This is your link: avava.studio/@you
Groupat least one, up to three
Notify the client by
Choose 1 to 3
Filetype and size, before upload
OR TRY
SVG, PNG or JPG · up to 10 MB
03

States

Field, summary, server error
NEUTRALEmailWe’ll send the invoice here
FOCUSEmailWe’ll send the invoice here
VALIDATINGEmailChecking…
ERROREmailAdd the domain, like ben@lume.com
WARNINGEmailDid you mean ben@gmail.com?
SUCCESSEmailEmail verified
Error summaryafter submit · focused · links to fields
Server errornothing the user typed is lost
04

Behavior

Timing compared, server errors, messages
When to validatesame field, four timings — type “ben@”
On inputLive from the first key
On blurWhen you leave the field
On submitOnly when you press Submit
SmartFirst blur, then live — recommended
Server errorstry ben@lume.example · or a network failure
Writing the messagesay what to do, not what went wrong
Invalid inputUse numbers only, like 24000
Error: field requiredAdd the client’s name
Date is wrongDeadline must be after 21 Oct
Password too weakAdd a number and a symbol
Oops! Something went wrongCouldn’t save — check your connection and try again
05

In Avava

New invoice, invite teammates
New invoicecountry-specific VAT · dates · summary
INV-0429 · DraftLeave a field, or press Create invoice to see the summary.
DE + 9 digits, like DE123456789
Errors are listed above and next to each field
Invite teammatespaste many emails · each one checked
Separate with commas, spaces or new lines.
  • ben@lume.example — ok
  • mara@nova — Not a valid email
  • olivia@avava.studio — Already in the team
  • ben@lume.example — Listed twice
  • sam@atelier.example — ok
2 people will be invited · 3 need fixing: mara@nova (not a valid email), olivia@avava.studio (already in the team), ben@lume.example (listed twice)
06

Rules & a11y

Timing table, screen readers
When to check whatthe timing table
Required
On blur, then on submitNever while the field is still empty and focused
Format
After the first blur, then liveEmail, phone, postcode, VAT
Password rules
Live checklistShow progress, not an error
Match
Live once both have a valueConfirm password, totals
Async
Debounced 700 msUsername, domain, coupon
Server
After submitDuplicates, permissions, payment
Screen readersannounce once, link everything
✓aria-invalid="true" on the fieldOnly after the error is shown
✓aria-describedby → hint / errorThe message is read with the label
✓role="alert" on the new errorAnnounced once; warnings and success stay polite
✓Summary gets focus on submitLinks move focus to each field
✓Icon + text, never colour alone✓ ! ⚠ next to every message
✓Button stays enabledDisabled buttons don’t explain what’s missing
DO✓Wait for the first blur, then validate live✓Say how to fix it, with an example✓Keep everything people typed when the server fails✓Use warnings for things that are unusual but allowed✓Move focus to the summary or the first error on submit
DON’T✕Show “required” before anyone has typed✕Disable Submit until the form is valid✕Clear the field when it’s invalid✕Write “Invalid input” or “Error”✕Rely on a red border alone