フォームのバリデーションエラーは、ユーザーエクスペリエンスにとって重要な要素です。ユーザーがフォームを送信しようとしたときに、何か問題があるとすぐに通知することで、問題を速やかに修正することができます。しかし、長いフォームではバリデーションエラーメッセージが見落とされることもあります。特に、エラーメッセージがページの上部にあると、ユーザーがスクロールせずには見られません。
そこで、この記事では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を使ってバリデーションエラーが発生した時にページ上部に移動する方法をご紹介しました。これにより、ユーザーエクスペリエンスを向上させ、ユーザーがエラー情報を見逃す可能性を減らすことができます。さらに、このロジックはカスタムフック内に包むことで、複数のフォームで再利用可能となります。