入力エラー表示（バリデーション） Form Validation

入力が間違っていると、欄が赤くなって下に理由が出る。直すとその場で消える。

別名: バリデーション入力チェックエラーメッセージ必須入力入力ミスの表示赤い枠FormTextFormFieldValidator
動き: 間違えると赤い枠と説明が出る直すと消える
作り方: 標準ウィジェット Flutter に入っているものだけで作れます

本物の Flutter ウィジェットが動きます（初回は数秒かかります）

別タブで大きく開く ↗

どんなもの？

Form で入力欄をまとめ、各 TextFormField の validator にチェックを書きます。

validator は問題があればエラー文を返し、なければ null を返します。返した文が欄の下に赤く出ます。

送信ボタンでは formKey.currentState!.validate() を呼び、全部 null のときだけ先へ進めます。

各欄に autovalidateMode: AutovalidateMode.onUserInteraction を付けると、一度触った欄は打つたびにチェックされ、直した瞬間にエラーが消えます。

同じ設定を Form 側に付けると、1つの欄を触っただけで、まだ触っていない欄まで「入力してください」と赤くなるので注意します。

エラー文は「入力が正しくありません」ではなく「@ が入っていません」のように直し方が分かる言葉にします。

こんなときに

会員登録・お問い合わせなど、送る前に入力の形を確かめたいフォーム

避けたい場面

1文字目を打った瞬間からエラーを出す（まだ打っている途中なので、触り終えてから出す）

最小コード

final formKey = GlobalKey<FormState>();

Form(
  key: formKey,
  child: Column(children: [
    TextFormField(
      // 触った欄だけ、打つたびにチェック（Form 側に付けると未入力の欄まで赤くなる）
      autovalidateMode: AutovalidateMode.onUserInteraction,
      decoration: const InputDecoration(labelText: 'メールアドレス'),
      validator: (v) {
        if (v == null || v.isEmpty) return '入力してください';
        if (!v.contains('@')) return '@ が入っていません';
        return null; // 問題なし
      },
    ),
    FilledButton(
      onPressed: () {
        if (formKey.currentState!.validate()) submit();
      },
      child: const Text('登録する'),
    ),
  ]),
)