【react-hook-form】入力時にバリデーションチェックをしたい

はじめに

react-hook-formの公式ページからバリデーションチェックのタイミング変更をする方法がすぐにわからなかったため備忘です。

問題

数値型のinput（学習時間）にマイナスの値を入力するとバリデーションエラーが発生し、登録ボタンをクリックできないようにしています。

初期状態だと、バリデーションエラーの内容が表示される（バリデーションチェックが実行される）のは送信ボタンを押してからのため、現状だと以下のようになぜ登録ボタンが押せないのかわからないような状態です。
そのためバリデーションチェックの実行タイミングをinput入力時に変更する必要があります。

以下抜粋ソースコードです

修正前

import { useForm } from "react-hook-form";

const Form = () => {
  const {
    register,
    handleSubmit,
    formState: { errors, isValid },
  } = useForm<FormValues>();

  return (
      // ...省略...
      <PrimaryButton
        type="submit"
        form="register"
        disabled={!isValid}
        >
        登録
      </PrimaryButton>
  );
};

解決方法

useForm()の引数に{mode: "onChange"}を追加してください。

修正後

import { useForm } from "react-hook-form";

const Form = () => {
  const {
    register,
    handleSubmit,
    formState: { errors, isValid },
-  } = useForm<FormValues>();
+  } = useForm<FormValues>({
+    mode: "onChange",
+  });


  return (
      // ...省略...
      <PrimaryButton
        type="submit"
        form="register"
        disabled={!isValid}
        >
        登録
      </PrimaryButton>
  );
};

おわりに

公式ページからわかることだと思うのですが、すぐにヒットする検索ワードが思いつきませんでした。

なお、公式ではValidation strategyという用語で説明されていました。（validation timingとかじゃないんだ...）

mode: Validation strategy before submitting behaviour.

参考

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼
https://projisou.jp