FORM SUBMISSION LAB

submit() vs requestSubmit()

どちらも送信。でも、通る経路が違います。

BASELINE WIDELY AVAILABLE

LIVE COMPARISON

同じフォーム、違う送信経路

SAME FORM

DIRECT

form.submit()

送信だけ実行

入力チェックconstraint validation

未実行

submitイベントsubmit event

未発火

送信ボタン情報event.submitter

なし

BUTTON FLOW

form.requestSubmit()

クリック相当

入力チェックconstraint validation

待機中

submitイベントsubmit event

待機中

送信ボタン情報event.submitter

待機中

FORM STATEEMPTY

SAFE DEFAULTrequestSubmit()

SUBMITTER—

LAST RESULTREADY

DECISION GUIDE

ボタンを押した流れにそろえる

入力を検証required / type / pattern

イベントを発火submitで処理を受け取る

ボタンを識別event.submitterで取得

RECOMMENDED

通常のフォーム送信をJavaScriptから始めるなら、

form.requestSubmit(button)

JAVASCRIPT RECIPE

2つの経路を比較する

const form = document.querySelector("form");
const button = form.querySelector("[type='submit']");

// 検証とsubmitイベントを通らない
form.submit();

// 送信ボタンを押したときと同じ流れ
form.requestSubmit(button);