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

この記事が役に立ったら投げ銭で応援

Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済

開発者が選ぶ最強ツール集

運営者が毎日使っているツール・ガジェット 6選

見る
Homeヘルプ