HomeCasa Prompts

React-Formular mit barrierefreier Validierung (React Hook Form + Zod)

Erstelle ein React-Formular mit Validierungsschema, barrierefreien Fehlermeldungen, sicherem Absenden, Serverfehlern pro Feld und einer Testcheckliste. Entwickelt für ChatGPT, Claude, Gemini und Microsoft Copilot. Er enthält 5 anpassbare Variablen und lässt sich kostenlos mit einem Klick kopieren.

Fortgeschritten · Code · Redaktionelle Prüfung ausstehend

Entwickelt für:

Prompt

Arbeite als Senior-Frontend-Entwickler mit Schwerpunkt auf barrierefreien Formularen und robuster Validierung in React.

Kontext:
- Felder und Regeln: {{felder}}
- Was beim Absenden passiert: {{absenden}}
- Bibliothek: {{bibliothek}}
- Styling: {{styling}}
- Sprache der Fehlermeldungen: {{sprache_meldungen}}

Wenn etwas Wichtiges fehlt (Fehlerformat des Servers, optionale Felder, bedingte Regeln), frag nach, bevor du Code schreibst.

Liefere:
1. Das typisierte Validierungsschema (mit {{bibliothek}}) mit klaren Meldungen, die sagen, wie man den Fehler behebt, und wie es sich auf dem Server wiederverwenden lässt.
2. Die Formularkomponente in TypeScript: sichtbare Labels pro Feld, `aria-invalid`, `aria-describedby` auf Fehler- und Hilfetext und Fokus auf das erste fehlerhafte Feld beim Absenden.
3. Sinnvolles Validierungs-Timing: keine Fehler, solange das Feld noch nicht verlassen wurde, danach Revalidierung während der Korrektur.
4. Absende-Status: Button deaktiviert oder mit Ladeanzeige, Schutz vor doppeltem Absenden, Erfolgsmeldung über eine `aria-live`-Region.
5. Serverfehler: wie sie dem passenden Feld zugeordnet oder als allgemeiner Fehler angezeigt werden.
6. Eine Liste von Testfällen (manuell oder automatisiert), inklusive reiner Tastaturbedienung und Screenreader.

Vorgaben:
- Clientseitige Validierung ist Komfort, keine Sicherheit: Weise darauf hin und nenne, was immer serverseitig geprüft werden muss.
- Keine personenbezogenen Daten oder Passwörter in die Konsole loggen.
- Keine Endpunkte erfinden: nutze [AUSFÜLLEN], wenn ich sie nicht angegeben habe.
- Verwende passende `autocomplete`- und `inputmode`-Attribute.

Format: ein Codeblock pro Datei mit Dateinamen und eine kurze Begründung jeder Entscheidung.

So verwenden Sie ihn

  1. Liste die Felder mit ihren echten Regeln auf (Pflicht, Länge, Format). 2. Gib an, welcher Endpunkt oder welche Server Action die Daten empfängt. 3. Füge den Code ein, teste das Formular nur mit der Tastatur und fordere gezielte Anpassungen an.

Anwendungsbeispiel

Felder: Name (Pflicht), E-Mail (gültig), Telefon (optional, deutsches Format), Nachricht (20-1000 Zeichen) · Absenden: POST /api/kontakt · Bibliothek: React Hook Form + Zod · Styling: Tailwind CSS.

Beispielergebnis

1. Gemeinsames Schema (kontaktSchema.ts)

import { z } from 'zod';

const telefonDE = /^(?:\+49\s?|0)[1-9][\d\s/-]{5,14}$/;

export const kontaktSchema = z.object({
  name: z.string().trim().min(1, 'Bitte geben Sie Ihren Namen ein'),
  email: z.string().trim().email('Bitte geben Sie eine gültige E-Mail ein, z. B. name@beispiel.de'),
  telefon: z
    .string()
    .trim()
    .regex(telefonDE, 'Bitte geben Sie eine deutsche Telefonnummer ein, z. B. 0211 1234567')
    .or(z.literal('')),
  nachricht: z
    .string()
    .trim()
    .min(20, 'Die Nachricht muss mindestens 20 Zeichen lang sein')
    .max(1000, 'Die Nachricht darf höchstens 1000 Zeichen lang sein'),
  datenschutz: z.literal(true, {
    errorMap: () => ({ message: 'Bitte stimmen Sie der Datenschutzerklärung zu' }),
  }),
});

export type KontaktInput = z.infer<typeof kontaktSchema>;

Dasselbe Schema wird in /api/kontakt mit kontaktSchema.safeParse(body) verwendet: Clientseitige Validierung ist Komfort, die serverseitige schützt. Das Formular nutzt zodResolver(kontaktSchema) mit mode: 'onTouched', und jedes Feld erhält aria-invalid sowie aria-describedby, das auf seine Fehlermeldung verweist …

Wichtige Fakten

Kategorie
Programmierung & Entwicklung · React
Ausgabetyp
Code
Niveau
Fortgeschritten
Entwickelt für
ChatGPT, Claude, Gemini und Microsoft Copilot
Verifiziert in
Redaktionelle Prüfung ausstehend
Variablen
Felder und Regeln, Was beim Absenden passiert, Bibliothek, Styling und Sprache der Meldungen
Sprache
Deutsch
Preis
Kostenlos, ohne Anmeldung
Aktualisiert
07.11.2026

Häufig gestellte Fragen

Warum serverseitig validieren, wenn der Browser schon prüft?

Weil jeder den Browser umgehen und Daten direkt an deine API schicken kann. Clientseitige Validierung verbessert die Bedienung, serverseitige schützt die Daten.

Was macht eine Fehlermeldung barrierefrei?

Sie ist per aria-describedby mit dem Feld verknüpft, das Feld trägt aria-invalid, der Text erklärt die Korrektur und der Fokus springt beim Absenden zum ersten Fehler.

Geht das auch ohne React Hook Form?

Ja. Wähle in der Variable eine andere Bibliothek oder „ohne Bibliothek“, dann passt der Prompt Schema und State-Handling an.

Wofür ist dieser Prompt gedacht?

Erstelle ein React-Formular mit Validierungsschema, barrierefreien Fehlermeldungen, sicherem Absenden, Serverfehlern pro Feld und einer Testcheckliste.

Mit welchen KI-Tools funktioniert er?

Er ist für ChatGPT, Claude, Gemini und Microsoft Copilot entwickelt. Wir haben ihn in diesen Tools noch nicht überprüft, daher können die Ergebnisse variieren.

Wie passe ich den Prompt an?

Klicken Sie auf „Anpassen“ und füllen Sie die Variablen aus (Felder und Regeln, Was beim Absenden passiert, Bibliothek, Styling und Sprache der Meldungen). Der Text wird sofort aktualisiert und lässt sich anschließend mit einem Klick kopieren. Die Werte werden nur in Ihrem Browser gespeichert.

Brauche ich Erfahrung, um ihn zu verwenden?

Er ist für Fortgeschrittene: Es hilft, das Thema zu kennen, um guten Kontext zu liefern und das Ergebnis kritisch zu prüfen.

Ist dieser Prompt kostenlos?

Ja. Jeder Prompt von HomeCasa Prompts ist kostenlos, ohne Anmeldung und ohne Abonnement. Sie können ihn auch in beruflichen Projekten verwenden.

Kann ich der KI-Ausgabe vertrauen?

Betrachten Sie sie als hochwertigen Entwurf: Prüfen Sie Daten, Zahlen und wichtige Aussagen immer, bevor Sie etwas veröffentlichen oder Entscheidungen treffen.

Ähnliche Prompts