Formulare (react-hook-form + zod)
Regeln
- Schema zuerst:
zod-Schema definieren, Typ mittels z.infer ableiten. Einzige Quelle der Wahrheit, die Client + Server gemeinsam nutzen.
@hookform/resolvers/zod (zodResolver) verwenden. Modus onTouched für UX; auf dem Server im Action erneut validieren.- Formular typisieren:
useForm<FormValues>. Keine any-Feldwerte.
- Barrierefreie Fehler:
aria-invalid, aria-describedby, role="alert" bei Meldungen. <label htmlFor> assoziieren.
- Submit über Server Action (
formAction oder Action, die die Serverfunktion aufruft). Ausstehende + Server-Fehlerzustände anzeigen.
Muster
'use client';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
const Schema = z.object({
email: z.string().email('Geben Sie eine gültige E-Mail-Adresse ein'),
password: z.string().min(8, 'Mindestens 8 Zeichen'),
});
type Values = z.infer<typeof Schema>;
export function LoginForm({ onSubmit }: { onSubmit: (v: Values) => Promise<{ ok: boolean; error?: string }> }) {
const { register, handleSubmit, formState: { errors, isSubmitting }, setError } = useForm<Values>({
resolver: zodResolver(Schema),
mode: 'onTouched',
});
return (
<form onSubmit={handleSubmit(async (v) => {
const r = await onSubmit(v);
if (!r.ok) setError('root', { message: r.error ?? 'Fehlgeschlagen' });
})}>
<label htmlFor="email">E-Mail</label>
<input id="email" type="email" autoComplete="email"
aria-invalid={!!errors.email} aria-describedby={errors.email ? 'email-err' : undefined}
{...register('email')} />
{errors.email && <p id="email-err" role="alert">{errors.email.message}</p>}
<label htmlFor="password">Passwort</label>
<input id="password" type="password" autoComplete="current-password" {...register('password')} />
{errors.password && <p role="alert">{errors.password.message}</p>}
{errors.root && <p role="alert">{errors.root.message}</p>}
<button disabled={isSubmitting}>{isSubmitting ? 'Anmelden…' : 'Anmelden'}</button>
</form>
);
}
Checkliste