⚡Frontend

Formulare richtig bauen mit Validierung

Robuste Formulare mit React Hook Form und Zod

Formulare sind der nervigste Teil jeder Web-App. Mit React Hook Form und Zod baust du validierte, typsichere Forms in Minuten statt Stunden.

Pro-Tip — Der schnelle Weg
Definiere dein Zod-Schema einmal und leite daraus sowohl den TypeScript-Typ als auch die Validierung ab. Eine einzige Quelle der Wahrheit.
Seite 1
1

Dependencies installieren

Du brauchst drei Pakete: React Hook Form, Zod und den Resolver.

npm install react-hook-form zod @hookform/resolvers
2

Zod Schema definieren

Definiere die Validierungsregeln als Schema. Daraus wird automatisch der TypeScript-Typ.

import { z } from "zod";


const schema = z.object({
 name: z.string().min(2, "Name muss mind. 2 Zeichen haben"),
 email: z.string().email("Ungueltige E-Mail"),
 message: z.string().min(10, "Nachricht zu kurz"),
});
3

Formular mit useForm verbinden

Verbinde das Zod-Schema mit React Hook Form ueber den zodResolver.

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


type FormData = z.infer<typeof schema>;


export default function ContactForm() {
 const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
 resolver: zodResolver(schema),
 });


 const onSubmit = (data: FormData) => {
 console.log(data);
 };


 return (
 <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
 <input {...register("name")} placeholder="Name" className="w-full p-3 border rounded" />
 {errors.name && <p className="text-red-500">{errors.name.message}</p>}


 <input {...register("email")} placeholder="E-Mail" className="w-full p-3 border rounded" />
 {errors.email && <p className="text-red-500">{errors.email.message}</p>}


 <textarea {...register("message")} placeholder="Nachricht" className="w-full p-3 border rounded" />
 {errors.message && <p className="text-red-500">{errors.message.message}</p>}


 <button type="submit" className="px-6 py-3 bg-blue-600 text-white rounded">Senden</button>
 </form>
 );
}
4

Loading State hinzufuegen

Zeige dem User, dass das Formular verarbeitet wird.

const { formState: { errors, isSubmitting } } = useForm<FormData>({ ... });


<button type="submit" disabled={isSubmitting}>
 {isSubmitting ? "Wird gesendet..." : "Senden"}
</button>
Seite 2
Warum das funktioniert
  • Zod validiert auf Client UND Server mit dem gleichen Schema
  • React Hook Form ist die performanteste Form-Library fuer React
  • Fehlermeldungen erscheinen sofort beim Tippen -- bessere User Experience
Tipps
  • Nutze z.infer<typeof schema> statt manueller TypeScript-Typen -- bleibt immer synchron
  • React Hook Form rendert nur geaenderte Felder neu, nicht das ganze Formular
  • Fuer mehrstufige Formulare: useForm mit defaultValues und mehreren Schritten
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen