【react, validation】react-hook-formでvalidationを実装する

概要

こんにちは！今日はreact-hook-formでvalidationを実装する方法について説明します。
これまでにreact-hook-formの基本的な使い方は説明したのですが、validationについて触れていなかったので説明したいと思います！

具体的な実装

react-hook-formの基本的な実装についてはこの記事にまとめてあるので参考にしてみてください！

1. errorsの宣言
2. 実際にvalidationを記述
3. errorsメッセージを出力

1.errorの宣言

（例）

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

このようにしてregister, handleSubmit, watchと一緒にformstate: {errors}としてerrorsを宣言してください。formstateの中で宣言しないとエラーになってしまうので注意してください。（古いバージョンの人はエラーにならないかも、、）

2.実際にvalidaionを記述

（例）

<input
              placeholder="姓"
              type="text"
              defaultValue="あ"
              {...register('user.last_name', {
                required: '必須項目です',
                maxLength: {
                  value: 19,
                  message: '19文字以内で入力してください',
                },
              })}
            />

重要なのはregisterの第２引数に当たる{required :"必須項目です",....}の部分です。
ここで実行したいvalidaionの種類とそのvalidationが満たされなかったときに表示するエラーメッセージを記述します。required: '必須項目です'とすると、そのinputに対応する値は必須項目になり、入力されていない状態でsubmitするとエラーが表示されるようになります。maxLength: {value: 19, message: "19文字以内で入力してください"}とすると19文字を超える文字の長さで値を入力するとエラーとなり,19文字以内で入力してくださいという文字がエラーメッセージとして表示されます。他にもvalidationの種類はたくさんあるので公式documentなどを参照して確認してみてください。

3.errorメッセージを出力

{errors.user?.last_name?.message}

このようにerrorsにエラーがある場合はメッセージが格納されているので表示できます。
ただエラーがない場合errors.user.last_nameの値がnilになってしまっているので?をつけて、nilの可能性もあることを伝えてあげる必要があるので注意してください。後は<span className="error_message">{errors.user?.last_name?.message}</span>などとしてCSSを適用させることもできます。

余談

今回はreact-hook-formが用意したvalidationを利用する方法をお伝えしました！
次回は2つのフォームの値を両方使用したvalidation(苗字と名前合わせて30文字以内など)の実装方法について説明しようと思います！