149 lines
4.5 KiB
Markdown
149 lines
4.5 KiB
Markdown
<!--
|
||
Feature Request: Validierungsfeedback & Auto-Scroll bei fehlenden Pflichtfeldern im Upload-Formular
|
||
Zielgruppe: Entwickler / KI-Implementierer
|
||
-->
|
||
|
||
# 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:
|
||
|
||
```js
|
||
// 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
|
||
|
||
1. **Klick auf Upload-Button** → Validierung aller Pflichtfelder
|
||
2. **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
|
||
3. **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
|
||
|
||
1. **Branch anlegen**: `feature/upload-form-validation`
|
||
2. **Plan-Datei anlegen**: `FeatureRequests/FEATURE_PLAN-upload-form-validation.md`
|
||
3. Fragen zur Umsetzung stellen (siehe unten)
|
||
4. Code-Implementierung
|
||
|
||
### Technischer Ansatz
|
||
|
||
**State für Validierungsfehler** in `MultiUploadPage`:
|
||
|
||
```js
|
||
const [validationErrors, setValidationErrors] = useState({
|
||
images: false,
|
||
year: false,
|
||
title: false,
|
||
workshopConsent: false,
|
||
});
|
||
```
|
||
|
||
**Refs für Auto-Scroll** zu jedem Pflichtfeld:
|
||
|
||
```js
|
||
const imagesSectionRef = useRef(null);
|
||
const yearFieldRef = useRef(null);
|
||
const titleFieldRef = useRef(null);
|
||
const consentRef = useRef(null);
|
||
```
|
||
|
||
**Validierungslogik** vor dem Upload:
|
||
|
||
```js
|
||
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):
|
||
|
||
```js
|
||
setValidationErrors(prev => ({ ...prev, title: false }));
|
||
```
|
||
|
||
**Visuelle Hervorhebung**: Felder-Komponenten erhalten ein `error`-Prop (MUI-Standard):
|
||
|
||
```jsx
|
||
<TextField
|
||
ref={titleFieldRef}
|
||
error={validationErrors.title}
|
||
helperText={validationErrors.title ? 'Bitte gib einen Titel ein.' : ''}
|
||
...
|
||
/>
|
||
```
|
||
|
||
---
|
||
|
||
## Klärungsfragen vor der Umsetzung
|
||
|
||
1. 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)
|
||
2. Soll die Einwilligungs-Checkbox ebenfalls eine inline Fehlermeldung erhalten oder reicht
|
||
ein Scroll + farbliche Markierung des Checkbox-Labels?
|
||
3. 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)
|