Kijan pou m fè yon fòm nan React ak validasyon?

Ou ka, men konbinezon react-hook-form + zod fè travay la pi fasil e pi pwòp:

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  non: z.string().min(2, 'Non an twò kout'),
  imel: z.string().email('Imèl la pa valab'),
  modpas: z.string().min(8, 'Omwen 8 karaktè'),
});

export function Enskripsyon() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: zodResolver(schema),
  });
  return (
    <form onSubmit={handleSubmit((d) => console.log(d))}>
      <input {...register('imel')} />
      {errors.imel && <p>{errors.imel.message}</p>}
      {/* ... */}
    </form>
  );
}

Enpòtan: refè validasyon an sou sèvè a ak menm schema zod la. Validasyon nan navigatè a se pou eksperyans itilizatè a sèlman, pa pou sekirite.