Beispiel: useForm – Formulare mit Custom Hook

import { useState } from 'react';

export function useForm(initialValues, validate) {
    // 1. State für die aktuellen Feld-Werte
    const [fieldValues, setFieldValues] = useState(initialValues);

    // 2. Validierungs-Fehler als Object {feldname: 'Fehlermeldung'}
    const [fieldErrors, setFieldErrors] = useState({});

    // 3. Welche Felder hat der User schon verlassen (für Fehler-Anzeige-Timing)
    const [fieldsTouched, setFieldsTouched] = useState({});

    // 4. Change-Handler — eine Funktion für ALLE Felder via name-Attribut
    const handleFieldChange = (event) => {
        const { name, value, type, checked } = event.target;
        // Checkboxen liefern in `checked`, alle anderen in `value`
        const newValue = type === 'checkbox' ? checked : value;

        // Funktionaler Setter — kein Stale-Closure
        setFieldValues(prev => ({
            ...prev,
            [name]: newValue,
        }));

        // Direkt validieren, falls validate-Funktion da
        if (validate) {
            // Wichtig: NICHT mit prev arbeiten — wir brauchen den NEUEN State,
            // den setFieldValues noch nicht commited hat. Daher den Wert manuell mergen.
            const nextValues = { ...fieldValues, [name]: newValue };
            setFieldErrors(validate(nextValues));
        }
    };

    // 5. Blur-Handler — markiert ein Feld als 'touched'
    const handleFieldBlur = (event) => {
        const { name } = event.target;
        setFieldsTouched(prev => ({ ...prev, [name]: true }));
    };

    // 6. Reset auf Initial-Werte zurück
    const handleFormReset = () => {
        setFieldValues(initialValues);
        setFieldErrors({});
        setFieldsTouched({});
    };

    // 7. Programmatisches Setzen — z.B. nach Server-Antwort
    const setFieldValue = (name, value) => {
        setFieldValues(prev => ({ ...prev, [name]: value }));
    };

    // 8. Alle Felder als touched markieren (für Submit-Zeit)
    const markAllTouched = () => {
        const allTouched = {};
        Object.keys(initialValues).forEach(key => {
            allTouched[key] = true;
        });
        setFieldsTouched(allTouched);
    };

    // 9. Prüft, ob das Formular insgesamt valid ist
    const isValid = validate
        ? Object.keys(validate(fieldValues)).length === 0
        : true;

    return {
        fieldValues,
        fieldErrors,
        fieldsTouched,
        isValid,
        handleFieldChange,
        handleFieldBlur,
        handleFormReset,
        setFieldValue,
        markAllTouched,
    };
}

export function validateRegistrationForm(values) {
    const errors = {};

    // Benutzername
    if (!values.fieldUsername) {
        errors.fieldUsername = 'Benutzername ist erforderlich';
    } else if (values.fieldUsername.length < 3) {
        errors.fieldUsername = 'Benutzername muss mindestens 3 Zeichen lang sein';
    }

    // E-Mail
    if (!values.fieldEmail) {
        errors.fieldEmail = 'E-Mail ist erforderlich';
    } else if (!/\S+@\S+\.\S+/.test(values.fieldEmail)) {
        errors.fieldEmail = 'E-Mail-Adresse ist ungültig';
    }

    // Passwort
    if (!values.fieldPassword) {
        errors.fieldPassword = 'Passwort ist erforderlich';
    } else if (values.fieldPassword.length < 6) {
        errors.fieldPassword = 'Passwort muss mindestens 6 Zeichen lang sein';
    }

    // AGB
    if (!values.fieldTerms) {
        errors.fieldTerms = 'Sie müssen die AGB akzeptieren';
    }

    return errors;
}

import { useForm } from './useForm';
import { validateRegistrationForm } from './validateRegistrationForm';

const initialValues = {
    fieldUsername: '',
    fieldEmail: '',
    fieldPassword: '',
    fieldTerms: false,
};

export default function RegistrationForm() {
    const {
        fieldValues,
        fieldErrors,
        fieldsTouched,
        isValid,
        handleFieldChange,
        handleFieldBlur,
        handleFormReset,
        markAllTouched,
    } = useForm(initialValues, validateRegistrationForm);

    const handleSubmit = (event) => {
        event.preventDefault();
        // Alle Felder als touched markieren, damit alle Fehler sichtbar werden
        markAllTouched();
        // Nur absenden, wenn validiert
        if (!isValid) return;

        console.log('Formular abgesendet:', fieldValues);
        handleFormReset();
    };

    // Helper: Fehler nur zeigen, wenn das Feld berührt wurde
    const fieldError = (name) =>
        fieldsTouched[name] ? fieldErrors[name] : null;

    return (
        <form onSubmit={handleSubmit}>
            <div>
                <label htmlFor="fieldUsername">Benutzername</label>
                <input
                    type="text"
                    id="fieldUsername"
                    name="fieldUsername"
                    value={fieldValues.fieldUsername}
                    onChange={handleFieldChange}
                    onBlur={handleFieldBlur}
                    placeholder="Mind. 3 Zeichen"
                    aria-invalid={!!fieldError('fieldUsername')}
                    aria-describedby="fieldUsername-error"
                />
                {fieldError('fieldUsername') && (
                    <p id="fieldUsername-error" role="alert">
                        {fieldError('fieldUsername')}
                    </p>
                )}
            </div>

            <div>
                <label htmlFor="fieldEmail">E-Mail</label>
                <input
                    type="email"
                    id="fieldEmail"
                    name="fieldEmail"
                    value={fieldValues.fieldEmail}
                    onChange={handleFieldChange}
                    onBlur={handleFieldBlur}
                    placeholder="example@mail.com"
                    aria-invalid={!!fieldError('fieldEmail')}
                />
                {fieldError('fieldEmail') && <p role="alert">{fieldError('fieldEmail')}</p>}
            </div>

            <div>
                <label htmlFor="fieldPassword">Passwort</label>
                <input
                    type="password"
                    id="fieldPassword"
                    name="fieldPassword"
                    value={fieldValues.fieldPassword}
                    onChange={handleFieldChange}
                    onBlur={handleFieldBlur}
                    placeholder="Mind. 6 Zeichen"
                    aria-invalid={!!fieldError('fieldPassword')}
                />
                {fieldError('fieldPassword') && <p role="alert">{fieldError('fieldPassword')}</p>}
            </div>

            <div>
                <label>
                    <input
                        type="checkbox"
                        name="fieldTerms"
                        checked={fieldValues.fieldTerms}
                        onChange={handleFieldChange}
                        onBlur={handleFieldBlur}
                    />
                    Ich akzeptiere die AGB
                </label>
                {fieldError('fieldTerms') && <p role="alert">{fieldError('fieldTerms')}</p>}
            </div>

            <button type="submit">Registrieren</button>
            <button type="button" onClick={handleFormReset}>Zurücksetzen</button>
        </form>
    );
}