【react-hook-form】入力文字数によりバリデーションの設定方法

はじめに

react-hook-formを使用していて、「入力文字数」に関するバリデーションの実装方法で少し混乱したので、整理がてら記事にまとめておきます。

この記事は個人的なアウトプットを目的として作成したものです。そのため、誤った情報や不足している内容が含まれている可能性があります。もし間違いや気になる点がございましたら、ぜひご指摘いただけますと幸いです。

実装パターン

パターン1：5文字を超えたらエラーメッセージを表示したい

これはreact-hook-formのmaxLengthオプションを使う方法です。バリデーションの失敗時にエラーメッセージを表示できます。

import { useForm, SubmitHandler } from "react-hook-form"

type Inputs = {
  name: string
}

export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<Inputs>()
  const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("name", { required: true, maxLength: {value: 5, message: "最大5文字です",},})} />
      {errors.name && <span>{errors.name.message}</span>}
      <input type="submit" />
    </form>
  )
}

valueには最大文字数、messageにはバリデーション失敗時に表示するメッセージを指定します。

パターン2：5文字以上をそもそも入力できないようにする

この方法はHTMLの属性としてのmaxLengthを使います。バリデーションではなく「入力制限」として働きます。

import { useForm, SubmitHandler } from "react-hook-form"

type Inputs = {
  name: string
}

export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<Inputs>()
  const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input maxLength={5} {...register("name", { required: true,})} />
      {errors.name && <span>This field is required</span>}
      <input type="submit" />
    </form>
  )
}

maxLength={5}とすることで、そもそも6文字目を入力できなくなります。

2つの違い

種類	内容	使用目的	挙動の違い
register(..., { maxLength })	react-hook-formのバリデーション用	フォーム送信時のチェック	入力はできるが、バリデーションエラーで送信不可
<input maxLength={5}>	HTMLの入力制限	入力自体を制限したい時	6文字目以降は入力できない（打てない）

終わりに

同じ「maxLength」でも、react-hook-formのバリデーション用とHTML属性の制限用で挙動が異なるため混乱しました。

参考

『react-hook-formのminやmaxLengthルールにエラーメッセージを設定する』　Zenn