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"
|
||||
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"
|
||||
|
@@ -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");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
Reference in New Issue
Block a user