hwc-forms-validation

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Chinese

Implement form-centric Hotwire workflows with Turbo Frames and Stimulus.

使用Turbo Frames和Stimulus实现以表单为中心的Hotwire工作流。

Identify the form flow: create/edit, inline edit, typeahead, modal form, or external controls.
Wrap the form interaction scope in a Turbo Frame when validation errors must rerender in place.
Return
```
422
```
for validation failures and
```
303
```
for successful redirects.
Handle post-submit behavior with
```
turbo:submit-end
```
only when Turbo defaults are insufficient.
Preserve user context during rerenders (focus/caret/selection).

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.

Open only the file needed for the current request.

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

Use

references/INDEX.md

for the full catalog.

仅打开当前请求所需的文件。

内联编辑：

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

模态验证流程：

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

输入联想搜索：

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

带焦点处理的输入联想验证：

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

Frame中的外部表单控件：

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

表单的Stimulus动作参数：

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

使用

references/INDEX.md

查看完整目录。