Skip to content
Flows
Library Paths Vault Generate Progress Run Demo Flow
Debugging Beginner · 30-60 minutes

Fix Broken Form Submission

Forms that validate, submit, persist, and recover: repair every broken form in your app end to end.

Start Route · 5 steps

The route

5 steps to Done

  1. 01

    Inventory and test every form

    Find each form's actual behavior versus its intended effect.

    Preview prompt + verify gate ▾

    List every form in the app (auth, create/edit, settings, search, contact - including in modals). For each: its intended effect, then actually submit it with valid data and record what happens (request fired? endpoint hit? data persisted after refresh? feedback shown?). Classify: WORKS / SILENT (nothing happens) / FAKE (feedback without persistence) / BROKEN (errors).

    • ✓ Every form was actually submitted
    • ✓ Persistence checked via refresh
    • ✓ Network tab checked for real requests
  2. 02

    Wire submissions to real endpoints

    Every SILENT and FAKE form must reach the backend and persist.

    Preview prompt + verify gate ▾

    Fix each non-working form's submission path. Requirements: the submit handler prevents default, gathers values, and calls the correct backend endpoint; the endpoint validates and persists to the database; the UI awaits the result - success feedback only after confirmed persistence, then appropriate navigation or reset; verify each by submitting and refreshing to see the data.

    • ✓ Each form fires a real request
    • ✓ Submitted data survives refresh
    • ✓ Success feedback is gated on the response
  3. 03

    Add validation on both sides

    Catch bad input inline, and never trust the client alone.

    Preview prompt + verify gate ▾

    Implement validation for every form. Client: required fields, formats (email/number), lengths, and matching fields validated with inline per-field error messages before submission; errors clear as the user fixes them. Server: the endpoint re-validates everything and returns field-level errors the UI displays. Test each rule by violating it, and test the server rules with a direct API call bypassing the UI.

    • ✓ Each rule shows an inline message when violated
    • ✓ Direct API calls with bad data are rejected
    • ✓ Errors clear on correction
  4. 04

    Add states and double-submit protection

    Forms must communicate work and never fire twice.

    Preview prompt + verify gate ▾

    Add interaction states to every form. Requirements: submit button disables and shows a loading indicator during submission; rapid double-click or double-Enter causes exactly one request; on failure the form shows a visible error and keeps ALL user input; on success show clear feedback and reset or navigate appropriately; long forms should not lose data on accidental navigation (confirm or persist draft where sensible).

    • ✓ Double-submit produces one request
    • ✓ Failure preserves every entered value
    • ✓ Loading state visible during submission
  5. 05

    Forms QA pass

    Verify every form's full lifecycle including hostile input.

    Preview prompt + verify gate ▾

    Run the forms QA and report PASS/FAIL with evidence per form: valid submit persists (refresh check); every validation rule fires inline; server rejects direct bad calls; failure path (kill network) preserves input with visible error; double-submit blocked; success feedback correct; mobile usability of the form. Fix all failures and re-run.

    • ✓ All forms tested through all paths
    • ✓ Network-failure path executed per form
    • ✓ All failures fixed and re-verified