React Hook Form でカスタムバリデーションを作成する方法

register 関数とバリデーション

React Hook Form では、useForm フックから register 関数を取得し、これを使ってフォームフィールドを登録します。
フォームフィールドにバリデーションルールを適用するには、register 関数にオプションオブジェクトを渡し、その中に validate フィールドを設定します。

validate フィールドの使い方

validate フィールドには、フォームフィールドの値が特定の条件を満たすかどうかを判定する関数を渡します。
この関数はフィールドの値を引数として受け取り、条件に応じてエラーメッセージを返すか、true を返します。

以下の例では、ユーザー名が4文字以上で、スペースを含まないことを条件にしています。

<input
  {...register("username", {
    validate: (value) => {
      if (value.length < 4) {
        return "ユーザー名は４文字以上である必要があります。";
      }
      if (value.includes(" ")) {
        return "ユーザー名にスペースを含めることはできません。";
      }
      return true;
    }
  })}
/>

エラーメッセージの表示

バリデーション関数から返されたエラーメッセージは、formState.errorsオブジェクトを通じてアクセス可能です。以下のようにしてエラーメッセージを表示することができます。

{errors.username && <p>{errors.username.message}</p>}

まとめ

React Hook Form の register 関数と validate フィールドを使用することで、カスタムバリデーションを簡単に実装できます。
バリデーション関数を通じて条件に基づいたエラーメッセージを返すことで、ユーザーに対して有用なフィードバックを提供することができます。