# Inline form validation > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is A three-field signup form ("Tessel", a shift-planning product) on a split page: a warm sand marketing panel on the left, the form on the right. Each field validates when it loses focus, never while the user is still typing a fresh value. Errors turn the border red, replace the helper line with the error and shake the control 6px; successes draw a tick inside the field and turn the helper green. The password field has a four-segment strength meter that fills as you type. The submit button stays disabled until all three fields pass and the terms box is ticked. A polite live region narrates each outcome. The detail worth copying is the blur-then-live rule: validation is triggered on blur, but once a field has a verdict it re-validates on every keystroke so the error clears the moment it is fixed. ## Reference behaviour 1. Initial state: left panel (520px) with logo "Tessel.", a 46px serif headline with one italic accent word, a paragraph and a customer quote pinned to the bottom. Right: a 420px form, heading "Create your account", lead line, three fields (Full name, Work email, Password), a terms checkbox, a disabled "Create account" button, and a status line reading "Fill in the three fields to continue". 2. Focusing an input: border becomes `--accent`, plus a 3px `--accent-soft` ring. 3. Blurring a field with a value that fails: border `--error` with a 3px `--error-soft` ring, helper text turns `--error` and shows the message, a red X icon appears at the right of the input, the control shakes (−6, +6, −4, +4px over 320ms), `aria-invalid="true"` is set, and the live region announces ": ". 4. Blurring a field that passes: border `--accent`, helper turns `--accent` and reads a short confirmation ("Looks good"), a tick draws itself inside the field over 280ms, and the live region announces " accepted". 5. Blurring an empty field: neutral (no error, hint restored). Empty is not an error until submit is attempted. 6. Once a field has a verdict (ok or error), every subsequent `input` event re-checks it silently: the border and message update but there is no shake and no announcement. 7. Password rules: score = (length ≥ 8) + (mixed case) + (digit) + (symbol); if length < 8 the score is capped at 1. The meter fills 1/2/3/4 segments in `--weak`/`--fair`/`--good`/`--strong` as the user types. Score ≥ 3 passes. 8. The eye button toggles the password between `type="password"` and `type="text"`, updating `aria-pressed` and its label. 9. The submit button enables only when name, email, password all pass **and** the terms checkbox is checked; when that happens the live region says "All set — press Create account". 10. Submitting: the button label becomes "Creating account…", the fields dim to 50 % opacity, and after 900ms the label becomes a tick + "Account created" and the live region confirms. A small "reset the form" link under the status line restores the initial state. ## Structure ``` 1280 × 800 ┌─────────────────────────┬───────────────────────────────────────────────┐ │ side 520 │ │ │ Tessel. │ Create your account (30px serif) │ │ │ Fields check themselves when you… │ │ │ Full name │ │ Ship the schedule, │ [ input 420×44 ✓ ] │ │ not the spreadsheet. │ helper 12.5px │ │ (46px serif) │ Work email │ │ paragraph 16px │ [ input ✗ ] │ │ │ error message │ │ │ Password │ │ │ [ input (eye) ✓ ] │ │ ───────────────────── │ ▮▮▮▯ meter 4 × 4px │ │ "quote…" │ helper │ │ Anneli Voss, Ops lead │ ☐ I agree to the terms … │ │ │ [ Create account 46px ] │ │ │ • status line (aria-live) │ └─────────────────────────┴───────────────────────────────────────────────┘ ``` - `` is a 2-column grid `520px 1fr`. `