FormSanity Demos

Submission

This page exercises the submission protocol against the mock server. Open the browser's network panel and follow the walkthrough below the form.

The page URL's query string is forwarded to the form action, steering the server's envelope: accepted (default) · invalid · redirect · error.

  • Name
Freeform Rows

Rows authored outside the ul grammar: a data-fs-field wrapper is a row wherever it stands. The referral code sends its errors to a designated element with data-fs-error-to.

Walkthrough

Everything interesting here happens in the network panel — open it first, then:

  1. Watch what the client sends. Submit, click the submit request, and open its payload. Alongside the form values sit csrf: demo-token — a hidden field round-tripped byte for byte — and token: tok_123, injected by a pre-submit hook and found in no markup anywhere. Select two colors first and colors arrives as an array; the compound name arrives as two fields. What the server receives is not just the fields on the screen.
  2. Watch what the server answers. The same request's response is the protocol's envelope: {"formsanity": 2, "status": "accepted", "message": "Thanks!"}. The green banner is the client rendering it.
  3. Watch a rejection round-trip. Follow the invalid link above, submit again, and the request goes red with a 422. Its response carries an errors array naming the email field — and the page has rendered that exact error as a bubble on the email field. A server-side verdict finding its way back to the right control is the protocol's other half.
  4. The other two scenarios. redirect: the accepted envelope carries a redirect and the client follows it. error: a 500, and the status region takes its failure state instead of pretending.
  5. The unique sub-protocol, no submit needed. Put taken@example.com in Email and press Tab: a unique request fires and the field flags "already in use". Do it three times fast and the third request is a 429 — the mock rate-limits on purpose, and the client backs off silently rather than flag a field it could not check.