CSS FORM UX

Validation Timing

同じinvalidでも、見せるタイミングで入力体験が変わります。

CSS selector対応
01

LIVE COMPARISON

同じ値、違うエラー表示

SAME VALUEhello
BEFORE

Immediate Error

:invalid
required

メール形式で入力してください。

ERROR

初期表示から赤い

AFTER

After Interaction

:user-invalid
required

確認するまでは、エラーを急がせません。

WAIT

操作前はまだ中立

01 · LOAD:invalidはERROR:user-invalidはWAIT
02 · CHECK操作後にERROR入力・確認を待って表示
03 · FIX正しい値ならOK:user-validへ切り替え
CSS RECIPE

状態ごとのコード

IMMEDIATE 初期表示から反映

制約に合わない間は、常にエラー表示になります。