Integrierte Fehlervalidierung und UX

1) Grundsätze

1. Vorausschauende Hilfe, keine Bestrafung. Wir zeigen Ihnen, wie Sie vor dem Fehler richtig eingeben.
2. Verlieren Sie keine Daten. Jeder Fehler zerstört nicht das eingegebene; unterstützen Rückgängig/Wiederholen.
3. Der Moment der Show.

Vor der Eingabe: helper text (Regeln und Beispiele).
Während: weiche Hints/Maske/Auto-Substitution.
Nach (blur/submit): Ein klarer Fehler mit der Anweisung „wie zu beheben“.
4. Aufmerksamkeit sparen. Eine Botschaft ist ein Grund und eine Handlung.
5. Verfügbarkeit. Text + Icon/Farbe, Kommunikation mit dem Feld über ARIA, Fokus auf das erste fehlerhafte Feld.

2) Validierungsschichten

Client synchron: Format, Länge, Pflicht, Maske. Schnell und billig.
Client asynchron: Login-Eindeutigkeit, BIN/IBAN-Prüfung, API-Hinweise. Mit Debounce.
Serverraum: Geschäftsregeln, Limits, Risiko-Scoring, Autorisierung/Rechte. Die Wahrheit der letzten Instanz.
Die Regel: Auch bei perfektem Client-Check bestätigt und bildet der Server den finalen Text.

3) Timings und Debounce

Blur-Validierung → Sofortfeedback ≤ 100 ms

Asynchrone Prüfung - Debunce 250-400 ms nach dem Stoppen der Eingabe.
Bestätigung des Erfolgs - lakonisch („Ok“) oder grünes Symbol; ohne „Gruß“.
Bei 'submit' zeigen wir die Fehlerliste an und übertragen den Fokus auf den ersten.

js const debounce = (fn, ms=300)=>{let t;return (...a)=>{clearTimeout(t);t=setTimeout(()=>fn(...a),ms)}}

4) Copywriting von Fehlern

Muster: Grund → wie man → Alternative repariert (falls vorhanden).

Gut: "Das Passwort ist kürzer als 8 Zeichen. Fügen Sie weitere Zeichen hinzu oder verwenden Sie die Phrase".
Gut: "Die IBAN sieht falsch aus. Überprüfen Sie die Länge und die Zeichen: A-Z, 0-9".
Schlecht: „Falsche Eingabe“.
Geben Sie dem Benutzer keine Schuld; Vermeiden Sie Jargon und Codes.
In sensiblen Bereichen (Zahlungen/KUS) vermeiden wir sicherheitsrelevante Details.

5) Muster der Anzeige von Nachrichten

5. 1 Am Feld (inline)

`aria-invalid="true"`, текст в `aria-describedby`.
Kurz, konkret; ohne lange Absätze.
Farbe + Symbol, aber die Bedeutung liegt im Text.

5. 2 Unter dem Formular (Zusammenfassung)

Listet alle Fehler mit Ankern zu den Feldern auf.
Der „Gehe zu Fehler“ -Button/Klick auf das Item verschiebt den Fokus.

5. 3 Während des Sendevorgangs

Wir blockieren das erneute Drücken (state' busy').
Mit einem Timeout von 3-5 s - „Wir erwarten eine Bestätigung“... mit einer sicheren Wiederholung.

6) Masken, Auto-Bewertungen und Korrektoren

Masken dürfen das Einfügen/Bearbeiten nicht stören. Erlauben Sie freie Eingabe, normalisieren Sie unter der Haube.
Auto-Suggestions: Zeigen Sie Beispielformate, Platzhalter als Hinweis und nicht als „Pflichtteil“.
Normalisierung: Trimming von Leerzeichen, Vereinheitlichung von Registern, Auto-Format (z. B.'+ 1 (___) ___ - ____') - aber speichern Sie die „saubere“ Version in den Quelldaten.

7) Verfügbarkeit (A11y)

Link: 'label' ↔ 'input', Fehler in 'aria-describedby'.
Kritisch ist 'role =' alert', informativ ist 'role =' status'.
Wir kehren den Fokus zum fehlerhaften Feld zurück,': focus-visible' sehen.
Text/Icon-Kontrast ≥ AA; Bedeutung hängt nicht nur von der Farbe ab.

html
<label for="email">Email</label>
<input id="email" name="email" aria-describedby="email-help email-err">
<small id="email-help">Например: user@domain.tld</small>
<p id="email-err" class="field-error" role="alert" hidden>Проверьте формат email</p>

8) Internationale Formate und Lokalisierung

Namen/Adressen: Erlauben Sie verschiedene Alphabete, Längen, Apostrophe, Bindestriche.
Daten/Währungen/Zahlen: Verwenden Sie lokale Eingabeformate und strenge interne Speicherstrukturen (ISO/Cent-Anzahl).
Telefon: Eingabe im internationalen Format „+ CC“, Auto-Tale durch das Land.
Nachrichtensprache: kurz, kulturneutral; Legen Sie + 20-30% der Zeilenlänge.

9) Sicherheit und Privatsphäre

Zeigen Sie nicht, dass das Konto existiert/nicht existiert - allgemeiner Text: „Wenn die E-Mail registriert ist, senden wir die E-Mail“.
Maskieren Sie sensible Daten (PAN, Reisepass).
Verwenden Sie in kritischen Schritten (Wette/Zahlung) Idempotenz und „sichere Wiederholungen“.
Logs - mit Korrelations-ID ohne PII in Nachrichten.

10) Erhaltung des Fortschritts

Automatische Ablage des Entwurfs (lokal/auf dem Server).
Bei einem Fehler beim Senden - das Formular bleibt ausgefüllt; Eine Wiederholung wird später vorgeschlagen.
Bei mehrstufigen Prozessen (KYC) - Speichern Sie die abgeschlossenen Schritte.

11) Asynchrone Validierung

Debauns 250-400 ms; Wir zeigen „überprüfen“... in der Nähe des Feldes, ohne den gesamten Bildschirm zu blockieren.
Klarer Hinweis auf Erfolg/Misserfolg ohne „Zucken“ des Layouts.
Netzwerk-Timeout → "Konnte nicht überprüft werden. Weiter mit Risiko?" (falls zulässig) oder „Wiederholen“.

js const checkUsername = debounce(async (v)=>{
state.usernameChecking = true;
const ok = await api.unique('username', v).catch(()=>null);
state.usernameChecking = false;
state.usernameValid = ok === true;
}, 300);

12) Zahlungsformulare und KYC (Spezifität)

Karten: PAN-Format, Laufzeit, CVC - Validierung während der Eingabe; Fehler - ohne Offenlegung der Gründe für die Ablehnung durch die Bank.
A2A/Wallets: Zulässigkeitsprüfung nach Land/Grenzen, klare Texte zu Provisionen/Fristen.
KYC: Schritt-für-Schritt-Anforderungen für Fotos/Dokumente, Vorschau, Dateigröße/-typ, Überprüfungsfristen, Datenschutz.
Verantwortungsvolles Spielen: Die Nachrichten sind neutral, mit den Aktionen „Limit festlegen „/„ Hilfe “.

13) Antipatterns

Zeigt Fehler „für jedes Symbol“ ohne Debunce an.
Das Formular wird bei einem Fehler zurückgesetzt.
Meldung „Falsche Eingabe“ ohne Feld/Regel.
Kritische Informationen nur durch Farbe/Icon.
Sperren Sie die gesamte Seite, um ein Feld zu überprüfen.
Kein Offline-Modus und keine Wiederholungen bei Netzwerkausfällen.

14) Design-System-Token (Beispiel)

json
{
"validation": {
"debounceMs": 300,
"blurFeedbackMs": 100,
"asyncTimeoutMs": 5000,
"summaryMaxItems": 6
},
"a11y": {
"useAriaDescribedby": true,
"errorRole": "alert",
"statusRole": "status"
},
"visual": {
"fieldGap": 8,
"iconSize": 16,
"borderRadius": 10
}
}

15) Snippets der Umsetzung

js const rules = {
email: v => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)          "Проверьте формат email"
};
async function validateEmail(v){
const fmt = rules.email(v);
if (fmt!== true) return fmt;
try {
const r = await fetch(`/api/email/check?v=${encodeURIComponent(v)}`);
const { allowed } = await r.json();
return allowed? true: "Этот email недоступен. Выберите другой.";
} catch {
return "Не удалось проверить. Повторите позже.";
}
}

ts function focusFirstError() {
const err = document.querySelector('[aria-invalid="true"]');
if (err) err.focus({ preventScroll:false });
}

js const saveDraft = debounce(form => localStorage.setItem('draft', JSON.stringify(Object.fromEntries(new FormData(form)))), 500);
form.addEventListener('input', ()=>saveDraft(form));

16) Metriken und Kontrolle

Time-to-Fix (Zeit vom Fehler bis zur Korrektur).
Fehlerrate nach Feldern und aus Gründen (Format/Limits/Server).
Erneute Übermittlung (retry success rate).
Der Anteil der geworfenen Formen und die Tiefe des Schrittes.
Auffüllen mit Hinweisen: CTR „Lesen Sie mehr“, Häufigkeit des Versteckens von Hinweisen.

17) QS-Checkliste

A11y

• Fokus geht zum ersten Fehlerfeld; 'aria-describedby '/' aria-invalid' werden angezeigt.
• Kontrast ≥ AA; Nachrichten hängen nicht nur von der Farbe ab.

Verhalten

• Integrierte Validierung mit Debunce; Fehler treten erst bei blur auf (außer bei kritischen Masken).
• Bei submit wird eine Zusammenfassung gebildet, die Felder werden nicht geleert.
• Asynchrone Prüfungen blockieren die Seite nicht. Es gibt einen Timeout und eine Wiederholung.

Text

• Ursache + wie zu beheben; ohne Codes/Schuld.
• Lokalisierung macht das Layout nicht kaputt; Beispiele sind relevant.

Sicherheit

• Keine PII-Lecks in den Nachrichten; die Existenz des Kontos nicht offenlegen.
• Idempotenz für kritische Operationen.

18) Dokumentation im Konstruktionssystem

Komponenten: 'FieldError', 'FormSummary', 'HelperText', 'BusyButton'.
Regelkarten für Typenfelder (E-Mail, Telefon, Passwort, Adresse, IBAN, Datum).
Hydes für Debunce, asynchrone Validierung und Offline-Verhalten.
Textvorlagen für häufige Fehler und Vorher/Nachher-Beispiele.

Kurze Zusammenfassung

Bei der eingebetteten Validierung geht es um vorausschauende Hilfe, klare Anweisungen und einen sorgfältigen Umgang mit Daten. Prüfen Sie lokal und auf dem Server, zeigen Sie Fehler im richtigen Moment mit konkreten Aktionen, respektieren Sie Verfügbarkeit und Privatsphäre, halten Sie Fortschritte und nutzen Sie Debounce. So werden Formen freundlich und Fehler schnell und korrigierbar.