Reactでフォームのバリデーションを簡単に行う方法を解説していきたいと思います。今回は、React Hook FormとYupを使って、効率的なフォームバリデーションを実装する方法をご紹介します。これらのライブラリを使うことで、簡単にバリデーションルールを実装することができます。

プロジェクトにreact-hook-formとyupをインストールします。そして、@hookform/resolversもインストールして、yupのスキーマをreact-hook-formに統合します。

npm install react-hook-form yup @hookform/resolvers

次にyupを使ってバリデーションスキーマを定義します。

以下の例では、名前とメールアドレスの入力フィールドのバリデーションルールを定義しています。

import * as yup from "yup";

const schema = yup.object().shape({
  name: yup.string().required("Name is required"),
  email: yup.string().email("Email is invalid").required("Email is required"),
});

次に、react-hook-formのuseFormフックを使って、先ほど定義したバリデーションスキーマを設定します。

yupResolverを使ってyupのスキーマをresolverオプションとして渡します。

ここでバリデーションエラーが発生したときに補足できるようにformState: { errors }を定義しておきます。

import React from "react";
import { useForm, SubmitHandler } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";

type Inputs = {
  name: string;
  email: string;
};

const MyForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm<Inputs>({
    resolver: yupResolver(schema),
  });

  const onSubmit: SubmitHandler<Inputs> = data => {
    console.log(data);
  };

  //...
};

最後に、各入力フィールドとSubmitボタンを表示し、バリデーションエラーがある場合はエラーメッセージを表示できるようにします。

//...
return (
  <form onSubmit={handleSubmit(onSubmit)}>
    <input {...register("name")} placeholder="Name" />
    <p>{errors.name?.message}</p>

    <input {...register("email")} placeholder="Email" />
    <p>{errors.email?.message}</p>

    <button type="submit">Submit</button>
  </form>
);

以上が、React Hook FormとYupを使った、フォームバリデーションを実装となります。

これらのライブラリを使うことで、フォームのバリデーションを簡単に実装していきたいですね。