GifproGifpro

React Hook Form + Zod Validation: AI-Generated Code Prompt

CODE PREVIEW

P

Prompt

Create a React component that uses React Hook Form with Zod schema validation. Include a simple form with fields: email (required, valid email), password (required, min 6 characters), age (optional, number min 0). Show error messages below each field and disable the submit button while submitting. Use TypeScript.

このデモでは React Hook Form と Zod を組み合わせて型安全なフォーム検証を実現します。スキーマで email、password、age フィールドのルールを定義。エラーメッセージはリアルタイム表示、送信ボタンは送信中に無効化されます。モダンな React フォームのクリーンなパターンです。

Prompt Overview

In this demo, React Hook Form and Zod are combined to achieve type-safe form validation. Rules for the email, password, and age fields are defined in the schema. Error messages are displayed in real-time, and the submit button is disabled during submission. This is a clean pattern for modern React forms.

Was this prompt helpful?

Comments

Comments appear after moderation

Homeヘルプ