feat: add maxLength validation to form inputs and improve saveRow feedback
This commit is contained in:
@@ -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"
|
||||||
|
@@ -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");
|
||||||
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
Reference in New Issue
Block a user