💟

React Hook FormのRegisterOptionのvalidateでmessageを指定する方法

2021/05/04に公開

結論

react-hook-form v7.*

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

const requierdWord = 'ねこ';

export default function Page() {
  const { register, formState: { errors } } = useForm<{text: string}>({
    defaultValues: { text: ''},
  });
  
  return (
    <div>
      <input
        type="text"
        {...register("text", {
	  validate: {
	    message: v => v.includes(requierdWord)
	      ? null
	      : `${requierdWord}」を含んだ文字列を入力してください`
	  }
	})}
       />
       {errors &&
         <p className="error-message">{errors.text?.message}</p>
       }
    </div>
  )
}

解説

下記の公式ドキュメントのRulesのvalidateを見ると、オブジェクトと関数を受け入れる事が分かる
validate: Function | Object
https://react-hook-form.com/api/useform/register

objectのmessageに関数を渡す

nullが返却されればエラーなし
文字列が返却されれば、エラーとなり
formState.errors.text.messageに格納される。

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

const requierdWord = 'ねこ';

export default function Page() {
  const { register, formState: { errors } } = useForm<{text: string}>({
    defaultValues: { text: ''},
  });
  
  const textValidateOption = {
    validate: {
      message: v => v.includes(requierdWord)
        ? null
	: `${requierdWord}」を含んだ文字列を入力してください`
      }
  }
  
  return (
    <div>
      <input
        type="text"
        {...register("text", textValidateOption)}
       />
       {errors &&
         <p className="error-message">{errors.text?.message}</p>
       }
    </div>
  )
}

Discussion