React Hook Form バリーデーション実装

ReactHookを使ってバリデーション機能実装の復習用記事です。

React Hook Form・・・入力フォームの管理に特化したReact向けのライブラリ
https://ja.reactjs.org/docs/uncontrolled-components.html

バリデーション

実装コード

react.tsx

const {
  register,
  handleSubmit,
  formSteate: { errors }
} = useForm<Values>();

useFormからメソッドを受け取る

register・・・入力または選択された要素を登録
handleSubmit・・・検証が成功するとフォーム内のデータを受け取る
formSteate: { errors }・・・バリデーションエラーを受け取る

react.tsx

<input id="email"
       name="email"
       type="text"
       {...register("email", 
           {required: true,
           pattern:/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/,})}/>

inputに入力した内容がregisterに登録された内容で検証される

react.tsx

<span className="text-red-600">
      {errors.email?.type === "required" && "メールアドレスを入力してください"}
      {errors.email?.type === "pattern" && "正しい形式でメールアドレスを入力してください"}
</span>

registerでエラーが発生した場合、そのregisterに設定したkeyでerrorから取り出すことができる{error.key}
エラーが存在しているかどうかでエラーメッセージを表示する
※typeでどの条件のエラーかを判別

submitを押さなくてもバリデーションが行われる

react.tsx

const {
  register,
  handleSubmit,
  formSteate: { errors }
} = useForm<Values>({mode:"onChange"});

mode:"onChange" ・・・submitを押さなくてもonChangeでバリデーションが実行される