react-hook-formを用いて、二つの入力欄にまたがるvalidationを実装する方法

概要

　こんにちは！今日はreact-hook-formを用いて、やや複雑なvalidationを実装する方法を説明します。
react-hook-formでは、色々なvalidationが簡単に書けるようになっています。
今回は、二つの入力欄にまたがるvalidationを解説します。具体的には名字と名前に入力された文字列の長さが合計で 20未満になるようなvalidationを実装します。
よく使いそうな簡単なvalidationは、以前他の記事で解説したので参照してみてください！（RequireやmaxLengthなど)

具体的な方法

1. watchを宣言する。

(例)

const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm<ValuesType>({
    mode: 'onSubmit',
    reValidateMode: 'onChange',
  })

まずはreact-hook-formのimportを忘れずに行ってください。
その後、useFormを使って各変数の宣言をする際に、watchを宣言するようにします。これにより、validationに入力されている値がいつでも参照できるようになります。
ここでValuesTypeには、入力されるデータの型が格納されています。

2. validationを記述

（例）

<input
              placeholder="姓"
              type="text"
              defaultValue="あ"
              {...register('user.last_name', {
                required: '必須項目です',
                validate: {
                  lessThanTwenty: (value) =>
                    value.length + watch('user.first_name', '').length < 20 ||
                    '漢字氏名を合わせて20文字未満で入力してください',
                },
              })}
            />

例のようにregisterの第二引数にvalidationを記述していきます。
今回重要なのはvalidateの中身です。validateの中身を例のように記述することで、漢字氏名合わせて20文字未満でないとエラーが出るようになります。このようにvalidateの内容を記述してあげると自由にvalidationを記述することができます。
また具体的なvalidationの内容を書いた後に||を記述し、その後にエラーメッセージを書くことで、どのようなエラーメッセージを表示するかも記述できます！

まとめ

今日は、やや複雑なvalidationの書き方を解説しました。
validateを用いることで、色々なvalidationがかけるようになるので、是非参考にしてみてください！