FEATURE_REQUEST: Upload-Formular – Validierungsfeedback bei fehlenden Pflichtfeldern

Status: ⏳ Geplant
Erstellt: 1. April 2026

Problem

Das Upload-Formular (MultiUploadPage) blockiert den Upload-Vorgang still, wenn Pflichtfelder fehlen. Die Funktion handleUpload bricht ohne Benutzerrückmeldung ab:

// Aktuelles Verhalten in handleUpload():
if (selectedImages.length === 0) return;
if (!metadata.year || !metadata.title.trim()) return;
if (!consents.workshopConsent) return;

Der Nutzer klickt auf den Upload-Button – nichts passiert. Kein Hinweis, welches Feld fehlt, keine visuelle Hervorhebung, kein Scroll zum Problem.

Betroffene Pflichtfelder

Feld	Bedingung
Bilder auswählen	`selectedImages.length === 0`
Jahr	`!metadata.year`
Titel der Slideshow	`!metadata.title.trim()`
Workshop-Einwilligung (Checkbox)	`!consents.workshopConsent`

Gewünschtes Verhalten

Klick auf Upload-Button → Validierung aller Pflichtfelder
Bei einem oder mehreren fehlenden Feldern:
- Das erste fehlende Feld wird visuell hervorgehoben (roter Rahmen / Fehlermeldung unterhalb)
- Die Seite scrollt automatisch zum ersten fehlenden Feld
- Der Upload wird nicht ausgeführt
Fehlermeldungen verschwinden, sobald der Nutzer das jeweilige Feld korrekt ausfüllt

Use Cases

UC-1: Kein Titel eingegeben

Nutzer wählt Bilder aus, füllt Jahr aus, setzt Einwilligung, aber lässt Titel leer
Klick auf Upload-Button
→ Seite scrollt zum Titel-Feld, Feld wird rot umrandet, Meldung: „Bitte gib einen Titel für die Slideshow ein."

UC-2: Kein Jahr gewählt

→ Seite scrollt zum Jahr-Feld, Fehlermeldung: „Bitte wähle ein Jahr aus."

UC-3: Einwilligung fehlt

→ Seite scrollt zur Checkbox, Fehlermeldung: „Bitte bestätige die Einwilligung."

UC-4: Mehrere Felder fehlen gleichzeitig

→ Scroll zum ersten fehlenden Feld (Reihenfolge: Bilder → Jahr → Titel → Einwilligung)
Alle fehlenden Felder werden gleichzeitig markiert

Technische Umsetzung

Implementierungsschritte

Branch anlegen: feature/upload-form-validation
Plan-Datei anlegen: FeatureRequests/FEATURE_PLAN-upload-form-validation.md
Fragen zur Umsetzung stellen (siehe unten)
Code-Implementierung

Technischer Ansatz

State für Validierungsfehler in MultiUploadPage:

const [validationErrors, setValidationErrors] = useState({
  images: false,
  year: false,
  title: false,
  workshopConsent: false,
});

Refs für Auto-Scroll zu jedem Pflichtfeld:

const imagesSectionRef = useRef(null);
const yearFieldRef = useRef(null);
const titleFieldRef = useRef(null);
const consentRef = useRef(null);

Validierungslogik vor dem Upload:

const validate = () => {
  const errors = {
    images: selectedImages.length === 0,
    year: !metadata.year,
    title: !metadata.title.trim(),
    workshopConsent: !consents.workshopConsent,
  };
  setValidationErrors(errors);

  // Zum ersten Fehler scrollen
  if (errors.images) imagesSectionRef.current?.scrollIntoView({ behavior: 'smooth' });
  else if (errors.year) yearFieldRef.current?.scrollIntoView({ behavior: 'smooth' });
  else if (errors.title) titleFieldRef.current?.scrollIntoView({ behavior: 'smooth' });
  else if (errors.workshopConsent) consentRef.current?.scrollIntoView({ behavior: 'smooth' });

  return !Object.values(errors).some(Boolean);
};

Fehler-Reset bei Änderungen an den Feldern (jeweils im jeweiligen onChange-Handler):

setValidationErrors(prev => ({ ...prev, title: false }));

Visuelle Hervorhebung: Felder-Komponenten erhalten ein error-Prop (MUI-Standard):

<TextField
  ref={titleFieldRef}
  error={validationErrors.title}
  helperText={validationErrors.title ? 'Bitte gib einen Titel ein.' : ''}
  ...
/>

Klärungsfragen vor der Umsetzung

Werden die Eingabe-Komponenten für Jahr und Titel als MUI-TextField/Select gerendert oder als eigene Custom-Komponenten? (Bestimmt, ob error-Prop direkt nutzbar ist)
Soll die Einwilligungs-Checkbox ebenfalls eine inline Fehlermeldung erhalten oder reicht ein Scroll + farbliche Markierung des Checkbox-Labels?
Soll der Upload-Button während der Validierung deaktiviert (disabled) bleiben, oder erst nach dem ersten Klickversuch aktiviert werden? (aktuelle Implementierung: Button ist immer aktiv)

4.5 KiB Raw Blame History Unescape Escape