ZodとReact Hook Formによる、支払い方法フォームの作成

概要 ZodとReact Hook Form（以下RHF）を使って、支払い方法ごとにバリデーションの要件が異なるフォームを作っていきます。 この記事では、例として、以下の要件を実装していきます。 要件 支払い方法は、クレジットカード、コンビニ支払い、銀行支払いの3つ それぞれの支払い方法はラジオボタンで選択可能 クレジットカードは、カード番号、氏名、有効期限、セキュリティコードについてバリデーションを行う コンビニ支払いは、select boxから何かしら選択したかどうかをバリデーションする submitボタンは常にenabled blur時はフォーカスを外した項目のみ、submit時はラジオボタンから選択した支払い方法の全項目について、それぞれバリデーションをかける エラーメッセージは該当項目にフォーカスすると消える（blur時に再度検証） 完成系 今回の完成系コードはこちらに置いていま