Client-Side Validation Implementation

Übersicht

Dieses Dokument beschreibt die Implementierung der Client-seitigen Validierung für die Meldestelle-Anwendung. Die Validierung wurde gemäß der Anforderung "Implementiere Client-seitige Validierung" umgesetzt.

Implementierungsansatz

Die Client-seitige Validierung nutzt die bereits vorhandenen Validierungsklassen aus dem shared-kernel-Modul, die in commonMain definiert sind und somit sowohl auf dem Server (JVM) als auch im Client (JS) verfügbar sind:

ApiValidationUtils: Enthält spezifische Validierungsmethoden für API-Anfragen
ValidationUtils: Enthält allgemeine Validierungsmethoden
ValidationError: Repräsentiert einen einzelnen Validierungsfehler
ValidationResult: Repräsentiert das Ergebnis einer Validierung

Durch die Nutzung dieser gemeinsamen Klassen wird sichergestellt, dass die Validierungslogik auf Client- und Serverseite konsistent ist.

Beispielimplementierung

Als Beispiel wurde eine LoginForm-Komponente implementiert, die Client-seitige Validierung für Benutzername und Passwort durchführt, bevor die Daten an den Server gesendet werden.

Validierungsablauf

Benutzer gibt Daten in das Formular ein
Bei Klick auf den Login-Button werden die Eingaben mit ApiValidationUtils.validateLoginRequest() validiert
Bei Validierungsfehlern werden diese angezeigt, ohne dass eine Serveranfrage gesendet wird
Nur bei erfolgreicher Validierung wird die Anfrage an den Server gesendet

Code-Beispiel

// Perform client-side validation
val errors = ApiValidationUtils.validateLoginRequest(username, password)

if (errors.isNotEmpty()) {
    // If validation fails, update the validationErrors state
    validationErrors = errors
} else {
    // If validation passes, submit the form
    // ... API call code ...
}

Fehleranzeige

Validierungsfehler werden benutzerfreundlich angezeigt:

// Display validation error for username if any
getFieldError("username")?.let {
    p {
        css {
            "color" to "#e74c3c"
            "fontSize" to "12px"
            "margin" to "5px 0 0 0"
        }
        +it
    }
}

Vorteile der Client-seitigen Validierung

Bessere Benutzererfahrung: Sofortiges Feedback ohne Wartezeit auf Serverantwort
Reduzierte Serverlast: Ungültige Anfragen werden bereits im Client abgefangen
Konsistente Validierung: Gleiche Validierungslogik auf Client und Server
Offline-Fähigkeit: Grundlegende Validierung funktioniert auch ohne Serververbindung
Erhöhte Sicherheit: Doppelte Validierungsschicht (Client und Server)

Implementierte Komponenten

LoginForm

Eine React-Komponente, die als Web-Komponente registriert ist und in HTML verwendet werden kann:

<login-form onloginsuccess="handleLoginSuccess"></login-form>

Die Komponente validiert:

Benutzername/E-Mail (Pflichtfeld, Länge, E-Mail-Format wenn @ enthalten)
Passwort (Pflichtfeld, Mindestlänge)

Anleitung zur Implementierung weiterer Validierungen

1. Nutzung vorhandener Validierungsmethoden

Für die meisten Anwendungsfälle können die vorhandenen Methoden in ApiValidationUtils verwendet werden:

// Validierung von Login-Daten
ApiValidationUtils.validateLoginRequest(username, password)

// Validierung von Länder-Daten
ApiValidationUtils.validateCountryRequest(isoAlpha2Code, isoAlpha3Code, nameDeutsch, nameEnglisch)

// Validierung von Pferde-Daten
ApiValidationUtils.validateHorseRequest(pferdeName, lebensnummer, chipNummer, oepsNummer, feiNummer)

// Validierung von Veranstaltungs-Daten
ApiValidationUtils.validateEventRequest(name, ort, startDatum, endDatum, maxTeilnehmer)

// Validierung von Query-Parametern
ApiValidationUtils.validateQueryParameters(limit, offset, startDate, endDate, search, q)

// Validierung von UUID-Strings
ApiValidationUtils.validateUuidString(uuidString)

2. Implementierung eigener Validierungen

Für spezifische Validierungen können die Basismethoden in ValidationUtils verwendet werden:

// Prüfung auf nicht-leere Eingabe
ValidationUtils.validateNotBlank(value, fieldName)

// Längenvalidierung
ValidationUtils.validateLength(value, fieldName, maxLength, minLength)

// E-Mail-Validierung
ValidationUtils.validateEmail(email, fieldName)

// Telefonnummer-Validierung
ValidationUtils.validatePhoneNumber(phone, fieldName)

// Postleitzahl-Validierung
ValidationUtils.validatePostalCode(postalCode, fieldName)

// Ländercode-Validierung
ValidationUtils.validateCountryCode(countryCode, fieldName)

// Geburtsdatum-Validierung
ValidationUtils.validateBirthDate(birthDate, fieldName)

// Jahres-Validierung
ValidationUtils.validateYear(year, fieldName, minYear)

3. Anzeige von Validierungsfehlern

Validierungsfehler sollten benutzerfreundlich angezeigt werden:

// Hilfsfunktion zum Abrufen eines Fehlers für ein bestimmtes Feld
val getFieldError = { fieldName: String ->
    validationErrors.find { it.field == fieldName }?.message
}

// Anzeige des Fehlers
getFieldError("fieldName")?.let {
    // Fehleranzeige-Code
}

Fazit

Die Client-seitige Validierung wurde erfolgreich implementiert und kann als Grundlage für weitere Formularvalidierungen dienen. Durch die Nutzung der gemeinsamen Validierungsklassen wird eine konsistente Benutzererfahrung und erhöhte Datensicherheit gewährleistet.

Implementiert am: 2025-07-21 Status: ✅ Vollständig implementiert Dokumentation: ✅ Vollständig

5.4 KiB Raw Blame History