【React】react-hook-formを用いてフォームのバリデーションを簡単に行う

今回はreact-hook-formを用いてフォームのバリデーションを行ってみたいと思います。

Performant, flexible and extensible forms with easy-to-use validation.

性能、柔軟性、拡張性に優れたフォームと、使いやすいバリデーション。

インストール
使い方
バリデーションルールによってエラー文を変える
代表的なバリデーションルール

インストール

npm install react-hook-form

使い方

import { useForm, SubmitHandler} from 'react-hook-form'

type Inputs = {
  username: string
  password: string
}

export const App = () => {
  const { register, handleSubmit, formState: { errors } } = useForm<Inputs>();
  const onSubmit: SubmitHandler<Inputs> = data => {
    console.log(data);
  }

  return (
    <div>
    {/* onSubmitを呼び出す前に、handleSubmitにより入力のバリデーションを行う */}
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* inputを"register"関数によりフックに登録する  requiredをtrueに設定して必ず入力させる*/}
      <input {...register("username", { required: true })} />
      {
        /* usernameの入力でエラーがあった場合に文字列を表示する */
        errors.username && <span>usernameは必ず入力してください</span>
      }

      <input {...register("password", { required: true })} />
      {errors.password && <span>passwordは必ず入力してください</span>}
      
      {/* 送信ボタン　typeにsubmitを設定する */}
      <input type="submit" />
    </form>
    </div>
  )
}

export default App;

このようにコードを書くことで、usernameとpasswordをそれぞれ入力しないと警告文を出力され、onSubmitが呼ばれないようにすることができます。

バリデーションルールによってエラー文を変える

<input {...register("username", { 
        required: '入力してください',
        minLength: { value: 3, message: `3文字以上で入力してください`},
        maxLength: { value: 10, message: `10文字以内で入力してください` },
        pattern: { value: /^[a-zA-Z0-9]+$/, message: '半角英数字で入力してください' }
        })} />
{ errors.username && errors.username.message }