Forms & Validation

Core Workflow

1. Identify the form flow: create/edit, inline edit, typeahead, modal form, or external controls.
2. Wrap the form interaction scope in a Turbo Frame when validation errors must rerender in place.
3. Return

   422

   for validation failures and

   303

   for successful redirects.
4. Handle post-submit behavior with

   turbo:submit-end

   only when Turbo defaults are insufficient.
5. Preserve user context during rerenders (focus/caret/selection).

Guardrails

• Keep one source of truth for input state; avoid duplicate controls across frame and non-frame DOM.
• Use the HTML

  form

  attribute for controls rendered outside the target

  <form>

  hierarchy.
• Avoid firing submit logic on every keystroke without debounce/throttle.
• Keep post-submit behavior explicit when form responses update only a frame.

Load References Selectively

• Inline editing:

  references/2024-02-27-turbo-frames-inline-edit.md

• Modal validation flows:

  references/2024-05-21-turbo-frames-modals-validation.md

• Typeahead search:

  references/2023-11-07-turbo-frames-typeahead-search.md

• Typeahead validation with focus handling:

  references/2025-10-20-turbo-frames-typeahead-validation.md

• External form controls in frames:

  references/2026-02-03-turbo-frames-external-form.md

• Stimulus action parameters for forms:

  references/2024-01-16-stimulus-action-parameters.md

references/INDEX.md

Escalate to Neighbor Skills

• Navigation/history/cache behavior: use

  hwc-navigation-content

• WebSocket or Turbo Stream push updates: use

  hwc-realtime-streaming

• Media upload/playback behavior: use

  hwc-media-content

• Generic UX polish (spinners/progress/transitions): use

  hwc-ux-feedback

• General Stimulus API design questions: use

  hwc-stimulus-fundamentals