Meydan okuma: Form ve doğrulama

Zod ile doğrulamalı react-hook-form kayıt formu yazarsın.

Meydan okuma: Form ve doğrulama

Bu meydan okumada react-hook-form ile bir giriş formu yazacaksın. useForm hook'u register ve handleSubmit verir.

Doğrulama için register('email', { required: true }) yazarsın. Hatalar formState.errors içinde toplanır. handleSubmit(onSubmit) ile geçerli formu yakalarsın. Hata mesajını kullanıcıya göstermek için errors.email öğesini yazdırırsın.

Uygulama LoginForm bileşenini yaz

LoginForm yaz. useForm ile register ve handleSubmit al. <form onSubmit={handleSubmit((data) => console.log(data))}> içinde <input {...register('email', { required: true })} /> ve <button type="submit">Gönder</button> koy. Dışa aktar.

Örnek çözümü göster

import { useForm } from 'react-hook-form';

function LoginForm() {
  const { register, handleSubmit } = useForm();
  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <input {...register('email', { required: true })} />
      <button type="submit">Gönder</button>
    </form>
  );
}
export default LoginForm;

Kendini test et

react-hook-form'da hatalar nerede toplanır?
- useState.errors
- register.errors
- formState.errors
- errors state
Cevabı göster

formState.errors — formState.errors hataları taşır.

Boşluğu doldur: alanı zorunlu yap

<input {...register('email', { ____: true })} />

Cevabı göster

<input {...register('email', { required: true })} />

Sıradaki ders: Meydan okuma: Erişilebilir modal

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler