feat: add maxLength validation to form inputs and improve saveRow feedback

This commit is contained in:
2025-08-13 22:08:54 +02:00
parent d77302c532
commit c4c805083a
2 changed files with 16 additions and 3 deletions

View File

@@ -32,6 +32,7 @@ const MainForm: React.FC = () => {
id="losnummer" id="losnummer"
name="losnummer" name="losnummer"
placeholder="XXXX-XXXX-XXXX-XXXX" placeholder="XXXX-XXXX-XXXX-XXXX"
maxLength={255}
required required
className="w-full rounded-xl border border-black/25 bg-white/80 px-4 py-2.5 text-sm text-zinc-800 placeholder-zinc-400 shadow-inner outline-none ring-0 transition focus:border-black/40 focus:ring-2 focus:ring-black/10" className="w-full rounded-xl border border-black/25 bg-white/80 px-4 py-2.5 text-sm text-zinc-800 placeholder-zinc-400 shadow-inner outline-none ring-0 transition focus:border-black/40 focus:ring-2 focus:ring-black/10"
/> />
@@ -51,6 +52,7 @@ const MainForm: React.FC = () => {
name="vorname" name="vorname"
placeholder="Max" placeholder="Max"
required required
maxLength={100}
className="w-full rounded-xl border border-black/25 bg-white/80 px-4 py-2.5 text-sm text-zinc-800 placeholder-zinc-400 shadow-inner outline-none focus:border-black/40 focus:ring-2 focus:ring-black/10" className="w-full rounded-xl border border-black/25 bg-white/80 px-4 py-2.5 text-sm text-zinc-800 placeholder-zinc-400 shadow-inner outline-none focus:border-black/40 focus:ring-2 focus:ring-black/10"
/> />
</div> </div>
@@ -68,6 +70,7 @@ const MainForm: React.FC = () => {
name="nachname" name="nachname"
placeholder="Mustermann" placeholder="Mustermann"
required required
maxLength={100}
className="w-full rounded-xl border border-black/25 bg-white/80 px-4 py-2.5 text-sm text-zinc-800 placeholder-zinc-400 shadow-inner outline-none focus:border-black/40 focus:ring-2 focus:ring-black/10" className="w-full rounded-xl border border-black/25 bg-white/80 px-4 py-2.5 text-sm text-zinc-800 placeholder-zinc-400 shadow-inner outline-none focus:border-black/40 focus:ring-2 focus:ring-black/10"
/> />
</div> </div>
@@ -86,20 +89,22 @@ const MainForm: React.FC = () => {
name="adresse" name="adresse"
placeholder="Musterstraße 1" placeholder="Musterstraße 1"
required required
maxLength={255}
className="w-full rounded-xl border border-black/25 bg-white/80 px-4 py-2.5 text-sm text-zinc-800 placeholder-zinc-400 shadow-inner outline-none focus:border-black/40 focus:ring-2 focus:ring-black/10" className="w-full rounded-xl border border-black/25 bg-white/80 px-4 py-2.5 text-sm text-zinc-800 placeholder-zinc-400 shadow-inner outline-none focus:border-black/40 focus:ring-2 focus:ring-black/10"
/> />
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<label htmlFor="plz" className="text-sm font-medium text-zinc-800"> <label htmlFor="plz" className="text-sm font-medium text-zinc-800">
Postleitzahl + Ort: Postleitzahl:
</label> </label>
<input <input
type="text" type="text"
id="plz" id="plz"
name="plz" name="plz"
placeholder="12345 Musterstadt" placeholder="12345"
required required
maxLength={10}
className="w-full rounded-xl border border-black/25 bg-white/80 px-4 py-2.5 text-sm text-zinc-800 placeholder-zinc-400 shadow-inner outline-none focus:border-black/40 focus:ring-2 focus:ring-black/10" className="w-full rounded-xl border border-black/25 bg-white/80 px-4 py-2.5 text-sm text-zinc-800 placeholder-zinc-400 shadow-inner outline-none focus:border-black/40 focus:ring-2 focus:ring-black/10"
/> />
</div> </div>
@@ -114,6 +119,7 @@ const MainForm: React.FC = () => {
name="email" name="email"
placeholder="max@mustermann.de" placeholder="max@mustermann.de"
required required
maxLength={255}
className="w-full rounded-xl border border-black/25 bg-white/80 px-4 py-2.5 text-sm text-zinc-800 placeholder-zinc-400 shadow-inner outline-none focus:border-black/40 focus:ring-2 focus:ring-black/10" className="w-full rounded-xl border border-black/25 bg-white/80 px-4 py-2.5 text-sm text-zinc-800 placeholder-zinc-400 shadow-inner outline-none focus:border-black/40 focus:ring-2 focus:ring-black/10"
/> />
</div> </div>
@@ -125,7 +131,8 @@ const MainForm: React.FC = () => {
Los registrieren Los registrieren
</button> </button>
<p className="mt-1 text-xs text-zinc-500"> <p className="mt-1 text-xs text-zinc-500">
Wenn Sie die Daten eines bereits registrierten Loses bearbeiten möchten,{" "} Wenn Sie die Daten eines bereits registrierten Loses bearbeiten
möchten,{" "}
<a <a
className="text-blue-600 underline" className="text-blue-600 underline"
href="mailto:example@example.com" href="mailto:example@example.com"

View File

@@ -54,5 +54,11 @@ export const saveRow = (data: any) => {
method: "PUT", method: "PUT",
headers: headers, headers: headers,
body: JSON.stringify(data), body: JSON.stringify(data),
}).then((response) => {
if (response.ok) {
myToast("Eintrag erfolgreich gespeichert.", "success");
} else {
myToast("Fehler beim Speichern des Eintrags.", "error");
}
}); });
}; };