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"
name="losnummer"
placeholder="XXXX-XXXX-XXXX-XXXX"
maxLength={255}
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"
/>
@@ -51,6 +52,7 @@ const MainForm: React.FC = () => {
name="vorname"
placeholder="Max"
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"
/>
</div>
@@ -68,6 +70,7 @@ const MainForm: React.FC = () => {
name="nachname"
placeholder="Mustermann"
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"
/>
</div>
@@ -86,20 +89,22 @@ const MainForm: React.FC = () => {
name="adresse"
placeholder="Musterstraße 1"
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"
/>
</div>
<div className="space-y-1">
<label htmlFor="plz" className="text-sm font-medium text-zinc-800">
Postleitzahl + Ort:
Postleitzahl:
</label>
<input
type="text"
id="plz"
name="plz"
placeholder="12345 Musterstadt"
placeholder="12345"
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"
/>
</div>
@@ -114,6 +119,7 @@ const MainForm: React.FC = () => {
name="email"
placeholder="max@mustermann.de"
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"
/>
</div>
@@ -125,7 +131,8 @@ const MainForm: React.FC = () => {
Los registrieren
</button>
<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
className="text-blue-600 underline"
href="mailto:example@example.com"

View File

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