React Hook Form のバリデーションルールごとにエラーメッセージを定義する

React Hook Form のバリデーションルールは、実はこんな書き方ができる。

const {register, handleSubmit, formState: {errors} } = useForm()
const onSubmit = (data:any) => console.log(data)

return (
  <form onSubmit={handleSubmit(onSubmit)}>
    // よくあるサンプル
    <input {...register("email", { required: true })} />
    {errors.email && 'メールアドレスを入力してください'}

    // バリデーションルールと一緒にエラーメッセージを定義できる
    <input {...register("email", { required: 'メールアドレスを入力してください' })} />
    {errors.email && errors.email.message}
  </form>
)

この方法はルールが複数あるフォームで威力を発揮する。

const {register, handleSubmit, formState: {errors} } = useForm()
const onSubmit = (data:any) => console.log(data)

// ルール定義オブジェクト
const rules = {
  required: '入力してください',
  minLength: { value: 6, message: `6文字以上で入力してください。` },
  maxLength: { value: 32, message: `32文字以内で入力してください。` },
  pattern: { value: /^[a-zA-Z0-9]+$/, message: '半角英数字で入力してください。' }
}

return (
  <form onSubmit={handleSubmit(onSubmit)}>
    // バリデーションエラーの内容に応じてエラーメッセージが表示される
    <input {...register("userid", rules)} />
    {errors.userid && errors.userid.message}
  </form>
)

この書き方は当然 <Controller rules={} > でも使えるので、Material-UIのTextFieldsを使う時など、エラー表示機能があるコンポーネントで綺麗にエラーが書けます。