フォームのバリデーションエラーは、ユーザーエクスペリエンスにとって重要な要素です。ユーザーがフォームを送信しようとしたときに、何か問題があるとすぐに通知することで、問題を速やかに修正することができます。しかし、長いフォームではバリデーションエラーメッセージが見落とされることもあります。特に、エラーメッセージがページの上部にあると、ユーザーがスクロールせずには見られません。

そこで、この記事ではReact Hook FormとYupを使用して、バリデーションエラーが発生したときにページの上部に自動的にスクロールする方法を紹介します。この実装はカスタムフック内で行われ、フォームがこの挙動を共有するために再利用可能です。

なぜそれが必要なのか？

長いフォームでは、エラーメッセージがすぐには見えない可能性があります。特に、ページの下部で「送信」ボタンを押した後、エラーメッセージがページの上部にあると、ユーザーは何が問題なのかわからないかもしれません。この問題を解決するために、バリデーションエラーが発生したときにページの上部に自動的にスクロールすると、ユーザーはすぐにエラーメッセージを見つけることができます。

実装方法

React Hook FormのuseFormフックは、handleSubmit関数の第二引数としてエラーハンドラを提供します。これを使用して、バリデーションエラーが発生したときにページの上部に自動的にスクロールすることができます。

以下にその方法を示します。

// useCustomForm.ts
const {
  register,
  handleSubmit,
  formState: { errors },
} = useForm<FormData>({
  resolver: yupResolver(schema),
  defaultValues: {
    // ここにデフォルト値を設定
  },
});

const onSubmit = (data: FormData) => {
  // ...
};

const onError = () => {
  window.scrollTo(0, 0); // エラーが発生したらページの最上部へスクロール
};

return {
  register,
  errors,
  handleSubmit: handleSubmit(onSubmit, onError), // handleSubmit関数にエラーハンドラとしてonError関数を渡す
  // ...
};

上記のように、handleSubmit関数にエラーハンドラとしてonError関数を渡すことで、バリデーションエラーが発生した際に自動的にページの最上部へスクロールするようにすることができます。このロジックをカスタムフック内に包んで、フォーム全体で再利用することができます。

結論

React Hook FormとYupを使ってバリデーションエラーが発生した時にページ上部に移動する方法をご紹介しました。これにより、ユーザーエクスペリエンスを向上させ、ユーザーがエラー情報を見逃す可能性を減らすことができます。さらに、このロジックはカスタムフック内に包むことで、複数のフォームで再利用可能となります。