implemented tanstack form

frontend/package-lock.json

@@ -16,6 +16,7 @@
         "@mui/joy": "^5.0.0-beta.52",
         "@mui/material": "^9.0.1",
         "@tailwindcss/vite": "^4.3.0",
+        "@tanstack/react-form": "^1.32.0",
         "@tanstack/react-query": "^5.100.10",
         "i18next": "^26.0.10",
         "js-cookie": "^3.0.5",
@@ -25,7 +26,9 @@
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react-i18next": "^17.0.7",
         "react-router-dom": "^7.15.0",
-        "tailwindcss": "^4.3.0"
+        "tailwindcss": "^4.3.0",
+        "validator": "^13.15.35",
+        "zod": "^4.4.3"
       },
       "devDependencies": {
         "@eslint/js": "^10.0.1",
@@ -33,6 +36,7 @@
         "@types/node": "^24.12.2",
         "@types/react": "^19.2.14",
         "@types/react-dom": "^19.2.3",
+        "@types/validator": "^13.15.10",
         "@vitejs/plugin-react": "^6.0.1",
         "eslint": "^10.2.1",
         "eslint-plugin-react-hooks": "^7.1.1",
@@ -1768,6 +1772,50 @@
         "vite": "^5.2.0 || ^6 || ^7 || ^8"
       }
     },
+    "node_modules/@tanstack/devtools-event-client": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/devtools-event-client/-/devtools-event-client-0.4.3.tgz",
+      "integrity": "sha512-OZI6QyULw0FI0wjgmeYzCIfbgPsOEzwJtCpa69XrfLMtNXLGnz3d/dIabk7frg0TmHo+Ah49w5I4KC7Tufwsvw==",
+      "license": "MIT",
+      "bin": {
+        "intent": "bin/intent.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/form-core": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/form-core/-/form-core-1.32.0.tgz",
+      "integrity": "sha512-Tn5VRDSjyqjmaet2tJMuEWDRFyrCaon03vxXPlSSaiSs6C/N7lCIwGCXJbZXEUq1kTj8jYN9qyXHbsz4LQHcow==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/devtools-event-client": "^0.4.1",
+        "@tanstack/pacer-lite": "^0.1.1",
+        "@tanstack/store": "^0.9.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/pacer-lite": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/pacer-lite/-/pacer-lite-0.1.1.tgz",
+      "integrity": "sha512-y/xtNPNt/YeyoVxE/JCx+T7yjEzpezmbb+toK8DDD1P4m7Kzs5YR956+7OKexG3f8aXgC3rLZl7b1V+yNUSy5w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tanstack/query-core": {
       "version": "5.100.10",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.100.10.tgz",
@@ -1778,6 +1826,28 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
+    "node_modules/@tanstack/react-form": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-form/-/react-form-1.32.0.tgz",
+      "integrity": "sha512-6WP5SQTA6/H9crCpvpq3ZppYWqtrdE5NjOy6ebABi6uAQPqhfTzrdjS9t40mCZCFtGI5585OhJV6zBP/KN2zcw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/form-core": "1.32.0",
+        "@tanstack/react-store": "^0.9.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@tanstack/react-start": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@tanstack/react-query": {
       "version": "5.100.10",
       "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.100.10.tgz",
@@ -1794,6 +1864,34 @@
         "react": "^18 || ^19"
       }
     },
+    "node_modules/@tanstack/react-store": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-store/-/react-store-0.9.3.tgz",
+      "integrity": "sha512-y2iHd/N9OkoQbFJLUX1T9vbc2O9tjH0pQRgTcx1/Nz4IlwLvkgpuglXUx+mXt0g5ZDFrEeDnONPqkbfxXJKwRg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/store": "0.9.3",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tanstack/store": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/store/-/store-0.9.3.tgz",
+      "integrity": "sha512-8reSzl/qGWGGVKhBoxXPMWzATSbZLZFWhwBAFO9NAyp0TxzfBP0mIrGb8CP8KrQTmvzXlR/vFPPUrHTLBGyFyw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.2",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.2.tgz",
@@ -1882,6 +1980,13 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/validator": {
+      "version": "13.15.10",
+      "resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.15.10.tgz",
+      "integrity": "sha512-T8L6i7wCuyoK8A/ZeLYt1+q0ty3Zb9+qbSSvrIVitzT3YjZqkTZ40IbRsPanlB4h1QB3JVL1SYCdR6ngtFYcuA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.59.2",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.59.2.tgz",
@@ -3004,12 +3109,12 @@
       }
     },
     "node_modules/js-cookie": {
-      "version": "3.0.5",
+      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.7.tgz",
-      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "integrity": "sha512-z/wZZgDrkNV1eA0ULjM/F9/50Ya8fbzgKneSpoPsXSGd0KnpdtHfOZWK+GcwLk+EZbS4F9RBhU+K2RgzuDaItw==",
       "license": "MIT",
       "engines": {
-        "node": ">=14"
+        "node": ">=20"
       }
     },
     "node_modules/js-tokens": {
@@ -4093,6 +4198,15 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/validator": {
+      "version": "13.15.35",
+      "resolved": "https://registry.npmjs.org/validator/-/validator-13.15.35.tgz",
+      "integrity": "sha512-TQ5pAGhd5whStmqWvYF4OjQROlmv9SMFVt37qoCBdqRffuuklWYQlCNnEs2ZaIBD1kZRNnikiZOS1eqgkar0iw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/vite": {
       "version": "8.0.11",
       "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.11.tgz",
@@ -4229,7 +4343,6 @@
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.4.3.tgz",
       "integrity": "sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"

frontend/package.json

@@ -18,6 +18,7 @@
     "@mui/joy": "^5.0.0-beta.52",
     "@mui/material": "^9.0.1",
     "@tailwindcss/vite": "^4.3.0",
+    "@tanstack/react-form": "^1.32.0",
     "@tanstack/react-query": "^5.100.10",
     "i18next": "^26.0.10",
     "js-cookie": "^3.0.5",
@@ -27,7 +28,9 @@
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-i18next": "^17.0.7",
     "react-router-dom": "^7.15.0",
-    "tailwindcss": "^4.3.0"
+    "tailwindcss": "^4.3.0",
+    "validator": "^13.15.35",
+    "zod": "^4.4.3"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
@@ -39,6 +42,7 @@
     "@types/node": "^24.12.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
+    "@types/validator": "^13.15.10",
     "@vitejs/plugin-react": "^6.0.1",
     "eslint": "^10.2.1",
     "eslint-plugin-react-hooks": "^7.1.1",

frontend/src/config/interfaces.config.ts

@@ -1,3 +1,6 @@
+import z from "zod";
+import validator from "validator";
+
 export interface FormData {
   firstName: string;
   lastName: string;
@@ -19,3 +22,35 @@ export interface Message {
   headline: string;
   text: string;
 }
+
+export const createFormSchema = (
+  t: (key: string) => string,
+  invoice: boolean,
+) =>
+  z.object({
+    firstName: z.string().min(1, t("name-error")),
+    lastName: z.string().min(1, t("name-error")),
+    email: z.email(t("email-error")),
+    phoneNumber: z.string(t("phone-error")).refine(validator.isMobilePhone),
+    tickets: z.number(t("ticket-error")).min(1),
+    companyName: invoice
+      ? z.string().min(1, t("name-error"))
+      : z.string().optional(),
+    cmpFirstName: invoice
+      ? z.string().min(1, t("name-error"))
+      : z.string().optional(),
+    cpmLastName: invoice
+      ? z.string().min(1, t("name-error"))
+      : z.string().optional(),
+    cpmEmail: invoice ? z.email(t("email-error")) : z.string().optional(),
+    cpmPhoneNumber: invoice
+      ? z.string(t("phone-error")).refine(validator.isMobilePhone)
+      : z.string().optional(),
+    street: invoice
+      ? z.string().min(1, t("name-error"))
+      : z.string().optional(),
+    postalCode: invoice
+      ? z.string().min(1, t("name-error"))
+      : z.string().optional(),
+    paymentMethod: z.string().min(1, t("name-error")),
+  });

frontend/src/pages/MainForm.tsx

@@ -1,6 +1,5 @@
 import { useTranslation } from "react-i18next";
 import { useState, useEffect } from "react";
-import * as React from "react";
 import Cookies from "js-cookie";
 import {
   Sheet,
@@ -25,6 +24,10 @@ import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { confirmUser, fetchUsers } from "../utils/api/users";
 import { QRcodeModal } from "../components/modals/QR-CodeModal";
 import { SelectUserModal } from "../components/modals/SelectUserModal";
+import { useForm } from "@tanstack/react-form";
+import { changeTranslation } from "../utils/uxFncs";
+import { createFormSchema } from "../config/interfaces.config";
+import type { ZodObject, ZodRawShape } from "zod";
 
 const PAYMENT_METHODS = ["bar", "paypal", "andere"] as const;
 const PAYMENT_LABELS: Record<string, string> = {
@@ -33,65 +36,93 @@ const PAYMENT_LABELS: Record<string, string> = {
   andere: "Transfer",
 };
 
-const DEFAULT_FORM: FormData = {
+/**
-  firstName: "",
+ * Validates a single field against the full Zod schema.
-  lastName: "",
+ * Returns the first error message for that field, or undefined if valid.
-  email: "",
+ */
-  phoneNumber: "",
+function validateFieldWithZod(
-  tickets: 1,
+  schema: ZodObject<ZodRawShape>,
-  companyName: "",
+  fieldName: string,
-  cmpFirstName: "",
+  allValues: Record<string, unknown>,
-  cpmLastName: "",
+): string | undefined {
-  cpmEmail: "",
+  const result = schema.safeParse(allValues);
-  cpmPhoneNumber: "",
+  if (result.success) return undefined;
-  street: "",
+  const issue = result.error.issues.find(
-  postalCode: "",
+    (i) => i.path.length === 1 && i.path[0] === fieldName,
-  paymentMethod: "",
+  );
-};
+  return issue?.message;
-
+}
-// ─── Field component lives OUTSIDE MainForm so React doesn't treat it as a
-// new component type on every render, which would cause inputs to lose focus.
-const Field = ({
-  label,
-  name,
-  type = "text",
-  required = true,
-  formData,
-  onChange,
-}: {
-  label: string;
-  name: keyof FormData;
-  type?: string;
-  required?: boolean;
-  formData: FormData;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-}) => (
-  <FormControl required={required}>
-    <FormLabel>{label}</FormLabel>
-    <Input
-      name={name}
-      type={type}
-      value={formData[name] as string}
-      onChange={onChange}
-      variant="soft"
-      sx={{ borderRadius: "10px" }}
-    />
-  </FormControl>
-);
 
 export const MainForm = () => {
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
   const queryClient = useQueryClient();
 
   const [invoice, setInvoice] = useState(false);
   const [msg, setMsg] = useState<Message | null>(null);
   const [selectedUser, setSelectedUser] = useState<string | null>(null);
-  const [formData, setFormData] = useState<FormData>(DEFAULT_FORM);
   const [showSelectUser, setShowSelectUser] = useState(false);
   const [QRmodal, setQRmodal] = useState(false);
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const formSchema = createFormSchema(t, invoice);
-    setFormData({ ...formData, [e.target.name]: e.target.value });
+
+  const makeFieldValidator = (fieldName: string) => ({
+    onSubmit: ({
+      value,
+      fieldApi,
+    }: {
+      value: unknown;
+      fieldApi: { form: { state: { values: Record<string, unknown> } } };
+    }) => {
+      const allValues = fieldApi.form.state.values;
+      return validateFieldWithZod(formSchema, fieldName, allValues);
+    },
+    onBlur: ({
+      value,
+      fieldApi,
+    }: {
+      value: unknown;
+      fieldApi: { form: { state: { values: Record<string, unknown> } } };
+    }) => {
+      const allValues = fieldApi.form.state.values;
+      return validateFieldWithZod(formSchema, fieldName, allValues);
+    },
+  });
+
+  const { Field, Subscribe, handleSubmit, setFieldValue } = useForm({
+    defaultValues: {
+      firstName: "",
+      lastName: "",
+      email: "",
+      phoneNumber: "",
+      tickets: 1,
+      companyName: "",
+      cmpFirstName: "",
+      cpmLastName: "",
+      cpmEmail: "",
+      cpmPhoneNumber: "",
+      street: "",
+      postalCode: "",
+      paymentMethod: "",
+    },
+    onSubmit: async ({ value }) => {
+      const result = formSchema.safeParse(value);
+      if (!result.success) return;
+      mutateForm(value as FormData);
+    },
+  });
+
+  const getErrors = (field: {
+    state: { meta: { errorMap: Record<string, unknown> } };
+  }) => {
+    const normalizeErrors = (value: unknown) => {
+      if (Array.isArray(value)) return value as string[];
+      if (typeof value === "string" && value.length > 0) return [value];
+      return [] as string[];
+    };
+
+    const blurErrors = normalizeErrors(field.state.meta.errorMap["onBlur"]);
+    const submitErrors = normalizeErrors(field.state.meta.errorMap["onSubmit"]);
+    return [...blurErrors, ...submitErrors].filter(Boolean);
   };
 
   useEffect(() => {
@@ -119,10 +150,10 @@ export const MainForm = () => {
   });
 
   const { mutate: mutateForm, isPending: mutateFormIsPending } = useMutation({
-    mutationFn: () => submitFormData(formData, selectedUser),
+    mutationFn: (values: FormData) => submitFormData(values, selectedUser),
-    onSuccess: () => {
+    onSuccess: (_, values) => {
       queryClient.invalidateQueries({ queryKey: ["user", selectedUser] });
-      document.location.href = `/success?id=${nextID}&tickets=${formData.tickets}`;
+      document.location.href = `/success?id=${nextID}&tickets=${values.tickets}`;
     },
     onError: () => {
       queryClient.invalidateQueries({ queryKey: ["user", selectedUser] });
@@ -134,38 +165,15 @@ export const MainForm = () => {
     },
   });
 
-  // Setting the nextID after a user is selected
   const nextID = userData?.nextID ?? "N/A";
 
   const handleUserSelection = (username: string | null) => {
     if (username == null || username == "") {
       return;
     }
-
     setSelectedUser(username);
   };
 
-  const changeTranslation = () => {
-    const clientLng = i18n.language;
-
-    if (clientLng === "en") {
-      i18n.changeLanguage("de");
-      Cookies.set("language", "de");
-    } else if (clientLng === "de") {
-      i18n.changeLanguage("en");
-      Cookies.set("language", "en");
-    } else {
-      setMsg({
-        type: "danger",
-        headline: "Error",
-        text: "Cannot change langugage.",
-      });
-    }
-  };
-
-  // Shorthand so we don't repeat formData + onChange on every Field usage
-  const fieldProps = { formData, onChange: handleChange };
-
   return (
     <>
       <SelectUserModal
@@ -205,7 +213,6 @@ export const MainForm = () => {
             <IconButton onClick={() => setQRmodal(true)}>
               <QrCodeIcon />
             </IconButton>
-            {/* Language toggle */}
             <IconButton onClick={changeTranslation}>
               <TranslateIcon />
             </IconButton>
@@ -225,11 +232,10 @@ export const MainForm = () => {
           <form
             onSubmit={(e) => {
               e.preventDefault();
-              mutateForm();
+              handleSubmit();
             }}
             className="flex flex-col gap-4"
           >
-            {/* Next ID badge */}
             <Chip
               size="lg"
               variant="solid"
@@ -246,41 +252,155 @@ export const MainForm = () => {
 
             {/* Name row */}
             <div className="grid grid-cols-2 gap-3">
-              <Field label={t("first-name")} name="firstName" {...fieldProps} />
+              <FormLabel>{t("first-name")}</FormLabel>
-              <Field label={t("last-name")} name="lastName" {...fieldProps} />
+              <Field
+                name="firstName"
+                validators={makeFieldValidator("firstName")}
+              >
+                {(field) => {
+                  const errors = getErrors(field);
+                  return (
+                    <>
+                      <Input
+                        value={field.state.value ?? ""}
+                        onBlur={field.handleBlur}
+                        onChange={(e) => field.handleChange(e.target.value)}
+                        variant="soft"
+                        sx={{ borderRadius: "10px" }}
+                      />
+                      {errors.length > 0 && (
+                        <span className="text-red-500 text-sm">
+                          {errors[0]}
+                        </span>
+                      )}
+                    </>
+                  );
+                }}
+              </Field>
+
+              <FormLabel>{t("last-name")}</FormLabel>
+              <Field
+                name="lastName"
+                validators={makeFieldValidator("lastName")}
+              >
+                {(field) => {
+                  const errors = getErrors(field);
+                  return (
+                    <>
+                      <Input
+                        value={field.state.value ?? ""}
+                        onBlur={field.handleBlur}
+                        onChange={(e) => field.handleChange(e.target.value)}
+                        variant="soft"
+                        sx={{ borderRadius: "10px" }}
+                      />
+                      {errors.length > 0 && (
+                        <span className="text-red-500 text-sm">
+                          {errors[0]}
+                        </span>
+                      )}
+                    </>
+                  );
+                }}
+              </Field>
             </div>
 
+            <FormLabel>{t("email")}</FormLabel>
+            <Field name="email" validators={makeFieldValidator("email")}>
+              {(field) => {
+                const errors = getErrors(field);
+                return (
+                  <>
+                    <Input
+                      value={field.state.value ?? ""}
+                      onBlur={field.handleBlur}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      variant="soft"
+                      type="email"
+                      sx={{ borderRadius: "10px" }}
+                    />
+                    {errors.length > 0 && (
+                      <span className="text-red-500 text-sm">{errors[0]}</span>
+                    )}
+                  </>
+                );
+              }}
+            </Field>
+
+            <FormLabel>{t("phone-number")}</FormLabel>
             <Field
-              label={t("email")}
-              name="email"
-              type="email"
-              {...fieldProps}
-            />
-            <Field
-              label={t("phone-number")}
               name="phoneNumber"
-              type="tel"
+              validators={makeFieldValidator("phoneNumber")}
-              {...fieldProps}
+            >
-            />
+              {(field) => {
+                const errors = getErrors(field);
+                return (
+                  <>
+                    <Input
+                      value={field.state.value ?? ""}
+                      onBlur={field.handleBlur}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      variant="soft"
+                      type="tel"
+                      sx={{ borderRadius: "10px" }}
+                    />
+                    {errors.length > 0 && (
+                      <span className="text-red-500 text-sm">{errors[0]}</span>
+                    )}
+                  </>
+                );
+              }}
+            </Field>
 
             {/* Tickets + Invoice toggle */}
             <div className="grid grid-cols-2 gap-3 items-end">
               <FormControl required>
                 <FormLabel>{t("tickets")}</FormLabel>
-                <Input
+                <Field
                   name="tickets"
-                  type="number"
+                  validators={makeFieldValidator("tickets")}
-                  value={formData.tickets}
+                >
-                  onChange={handleChange}
+                  {(field) => {
-                  slotProps={{ input: { min: 1 } }}
+                    const errors = getErrors(field);
-                  variant="soft"
+                    return (
-                  sx={{ borderRadius: "10px" }}
+                      <>
-                />
+                        <Input
+                          type="number"
+                          value={field.state.value ?? ""}
+                          onBlur={field.handleBlur}
+                          onChange={(e) =>
+                            field.handleChange(Number(e.target.value))
+                          }
+                          slotProps={{ input: { min: 1 } }}
+                          variant="soft"
+                          sx={{ borderRadius: "10px" }}
+                        />
+                        {errors.length > 0 && (
+                          <span className="text-red-500 text-sm">
+                            {errors[0]}
+                          </span>
+                        )}
+                      </>
+                    );
+                  }}
+                </Field>
               </FormControl>
               <div className="flex items-center pb-2">
                 <Checkbox
                   checked={invoice}
-                  onChange={(e) => setInvoice(e.target.checked)}
+                  onChange={(e) => {
+                    const checked = e.target.checked;
+                    setInvoice(checked);
+                    if (!checked) {
+                      setFieldValue("companyName", "");
+                      setFieldValue("cmpFirstName", "");
+                      setFieldValue("cpmLastName", "");
+                      setFieldValue("cpmEmail", "");
+                      setFieldValue("cpmPhoneNumber", "");
+                      setFieldValue("street", "");
+                      setFieldValue("postalCode", "");
+                    }
+                  }}
                   label={t("invoice")}
                   variant="outlined"
                 />
@@ -293,92 +413,224 @@ export const MainForm = () => {
                 <Typography level="title-sm" color="primary">
                   {t("invoice-details")}
                 </Typography>
+
+                <FormLabel>{t("company-name")}</FormLabel>
                 <Field
-                  label={t("company-name")}
                   name="companyName"
-                  {...fieldProps}
+                  validators={makeFieldValidator("companyName")}
-                />
+                >
+                  {(field) => {
+                    const errors = getErrors(field);
+                    return (
+                      <>
+                        <Input
+                          value={field.state.value ?? ""}
+                          onBlur={field.handleBlur}
+                          onChange={(e) => field.handleChange(e.target.value)}
+                          variant="soft"
+                          sx={{ borderRadius: "10px" }}
+                        />
+                        {errors.length > 0 && (
+                          <span className="text-red-500 text-sm">
+                            {errors[0]}
+                          </span>
+                        )}
+                      </>
+                    );
+                  }}
+                </Field>
+
                 <div className="grid grid-cols-2 gap-3">
+                  <FormLabel>{t("first-name")}</FormLabel>
                   <Field
-                    label={t("first-name")}
                     name="cmpFirstName"
-                    {...fieldProps}
+                    validators={makeFieldValidator("cmpFirstName")}
-                  />
+                  >
+                    {(field) => {
+                      const errors = getErrors(field);
+                      return (
+                        <>
+                          <Input
+                            value={field.state.value ?? ""}
+                            onBlur={field.handleBlur}
+                            onChange={(e) => field.handleChange(e.target.value)}
+                            variant="soft"
+                            sx={{ borderRadius: "10px" }}
+                          />
+                          {errors.length > 0 && (
+                            <span className="text-red-500 text-sm">
+                              {errors[0]}
+                            </span>
+                          )}
+                        </>
+                      );
+                    }}
+                  </Field>
+
+                  <FormLabel>{t("last-name")}</FormLabel>
                   <Field
-                    label={t("last-name")}
                     name="cpmLastName"
-                    {...fieldProps}
+                    validators={makeFieldValidator("cpmLastName")}
-                  />
+                  >
+                    {(field) => {
+                      const errors = getErrors(field);
+                      return (
+                        <>
+                          <Input
+                            value={field.state.value ?? ""}
+                            onBlur={field.handleBlur}
+                            onChange={(e) => field.handleChange(e.target.value)}
+                            variant="soft"
+                            sx={{ borderRadius: "10px" }}
+                          />
+                          {errors.length > 0 && (
+                            <span className="text-red-500 text-sm">
+                              {errors[0]}
+                            </span>
+                          )}
+                        </>
+                      );
+                    }}
+                  </Field>
                 </div>
-                <Field label={t("street")} name="street" {...fieldProps} />
+
+                <FormLabel>{t("street")}</FormLabel>
+                <Field name="street" validators={makeFieldValidator("street")}>
+                  {(field) => {
+                    const errors = getErrors(field);
+                    return (
+                      <>
+                        <Input
+                          value={field.state.value ?? ""}
+                          onBlur={field.handleBlur}
+                          onChange={(e) => field.handleChange(e.target.value)}
+                          variant="soft"
+                          sx={{ borderRadius: "10px" }}
+                        />
+                        {errors.length > 0 && (
+                          <span className="text-red-500 text-sm">
+                            {errors[0]}
+                          </span>
+                        )}
+                      </>
+                    );
+                  }}
+                </Field>
+
+                <FormLabel>{t("postal-code")}</FormLabel>
                 <Field
-                  label={t("postal-code")}
                   name="postalCode"
-                  {...fieldProps}
+                  validators={makeFieldValidator("postalCode")}
-                />
+                >
+                  {(field) => {
+                    const errors = getErrors(field);
+                    return (
+                      <>
+                        <Input
+                          value={field.state.value ?? ""}
+                          onBlur={field.handleBlur}
+                          onChange={(e) => field.handleChange(e.target.value)}
+                          variant="soft"
+                          sx={{ borderRadius: "10px" }}
+                        />
+                        {errors.length > 0 && (
+                          <span className="text-red-500 text-sm">
+                            {errors[0]}
+                          </span>
+                        )}
+                      </>
+                    );
+                  }}
+                </Field>
+
+                <FormLabel>{t("phone-number")}</FormLabel>
                 <Field
-                  label={t("phone-number")}
                   name="cpmPhoneNumber"
-                  type="tel"
+                  validators={makeFieldValidator("cpmPhoneNumber")}
-                  {...fieldProps}
+                >
-                />
+                  {(field) => {
+                    const errors = getErrors(field);
+                    return (
+                      <>
+                        <Input
+                          value={field.state.value ?? ""}
+                          onBlur={field.handleBlur}
+                          onChange={(e) => field.handleChange(e.target.value)}
+                          variant="soft"
+                          type="tel"
+                          sx={{ borderRadius: "10px" }}
+                        />
+                        {errors.length > 0 && (
+                          <span className="text-red-500 text-sm">
+                            {errors[0]}
+                          </span>
+                        )}
+                      </>
+                    );
+                  }}
+                </Field>
+
+                <FormLabel>{t("email")}</FormLabel>
                 <Field
-                  label={t("email")}
                   name="cpmEmail"
-                  type="email"
+                  validators={makeFieldValidator("cpmEmail")}
-                  {...fieldProps}
+                >
-                />
+                  {(field) => {
+                    const errors = getErrors(field);
+                    return (
+                      <>
+                        <Input
+                          value={field.state.value ?? ""}
+                          onBlur={field.handleBlur}
+                          onChange={(e) => field.handleChange(e.target.value)}
+                          variant="soft"
+                          type="email"
+                          sx={{ borderRadius: "10px" }}
+                        />
+                        {errors.length > 0 && (
+                          <span className="text-red-500 text-sm">
+                            {errors[0]}
+                          </span>
+                        )}
+                      </>
+                    );
+                  }}
+                </Field>
               </div>
             )}
 
             {/* Payment method selection */}
             <FormControl required>
               <FormLabel>{t("select-payment-method")}</FormLabel>
-              <div className="flex gap-2 flex-wrap mt-1">
+              <Subscribe selector={(state) => state.values.paymentMethod}>
-                {PAYMENT_METHODS.map((method) => (
+                {(paymentMethod) => (
-                  <Button
+                  <div className="flex gap-2 flex-wrap mt-1">
-                    key={method}
+                    {PAYMENT_METHODS.map((method) => (
-                    variant={
+                      <Button
-                      formData.paymentMethod === method ? "solid" : "soft"
+                        key={method}
-                    }
+                        variant={paymentMethod === method ? "solid" : "soft"}
-                    color="primary"
+                        color="primary"
-                    onClick={() => {
+                        onClick={() => {
-                      setFormData((prev) => ({
+                          setFieldValue("paymentMethod", method);
-                        ...prev,
+                          if (method === "paypal") {
-                        paymentMethod: method,
+                            setQRmodal(true);
-                      }));
+                          }
-                      if (method === "paypal") {
+                        }}
-                        setQRmodal(true);
+                        sx={{
-                      }
+                          flex: 1,
-                    }}
+                          minWidth: "90px",
-                    sx={{
+                          borderRadius: "12px",
-                      flex: 1,
+                          py: 1.5,
-                      minWidth: "90px",
+                          textTransform: "none",
-                      borderRadius: "12px",
+                          fontWeight: paymentMethod === method ? 700 : 400,
-                      py: 1.5,
+                        }}
-                      textTransform: "none",
+                      >
-                      fontWeight: formData.paymentMethod === method ? 700 : 400,
+                        {PAYMENT_LABELS[method]}
-                    }}
+                      </Button>
-                  >
+                    ))}
-                    {PAYMENT_LABELS[method]}
+                  </div>
-                  </Button>
+                )}
-                ))}
+              </Subscribe>
-              </div>
-              {/* Hidden required input to enforce payment selection on submit */}
-              {!formData.paymentMethod && (
-                <input
-                  tabIndex={-1}
-                  required
-                  value=""
-                  onChange={() => {}}
-                  style={{
-                    opacity: 0,
-                    width: 0,
-                    height: 0,
-                    position: "absolute",
-                  }}
-                />
-              )}
             </FormControl>
 
             {mutateFormIsPending ? (
@@ -386,26 +638,29 @@ export const MainForm = () => {
                 <CircularProgress />
               </div>
             ) : (
-              <Button
+              <Subscribe selector={(state) => state.values.paymentMethod}>
-                type="submit"
+                {(paymentMethod) => (
-                disabled={!formData.paymentMethod}
+                  <Button
-                size="lg"
+                    type="submit"
-                sx={{
+                    disabled={!paymentMethod}
-                  mt: 2,
+                    size="lg"
-                  borderRadius: "14px",
+                    sx={{
-                  fontWeight: 700,
+                      mt: 2,
-                  letterSpacing: "0.05em",
+                      borderRadius: "14px",
-                  background: "linear-gradient(135deg, #2563eb, #1d4ed8)",
+                      fontWeight: 700,
-                  "&:hover": {
+                      letterSpacing: "0.05em",
-                    background: "linear-gradient(135deg, #1d4ed8, #1e40af)",
+                      background: "linear-gradient(135deg, #2563eb, #1d4ed8)",
-                  },
+                      "&:hover": {
-                }}
+                        background: "linear-gradient(135deg, #1d4ed8, #1e40af)",
-              >
+                      },
-                {t("submit")}
+                    }}
-              </Button>
+                  >
+                    {t("submit")}
+                  </Button>
+                )}
+              </Subscribe>
             )}
 
-            {/* Message */}
             {msg && (
               <Alert
                 color={msg.type}

frontend/src/utils/i18n/locales/de/de.json

@@ -30,5 +30,8 @@
     "loading": "Lädt...",
     "greeting": "Hallo,",
     "set-username-headline": "Keinen Benutzer ausgewählt",
-    "set-username-text": "Um mit dem Losverkauf zu beginnen, musst du einen Benutzer oben links auswählen."
+    "set-username-text": "Um mit dem Losverkauf zu beginnen, musst du einen Benutzer oben links auswählen.",
+    "name-error": "Sie müssen einen Namen eingeben!",
+    "email-error": "Sie müssen eine gültige E-Mail Adresse eingeben!",
+    "phone-error": "Sie müssen eine gültige Telefonnummer eingeben!"
 }

frontend/src/utils/i18n/locales/en/en.json

@@ -31,5 +31,8 @@
     "loading": "Loading...",
     "greeting": "Hello,",
     "set-username-headline": "No user selected",
-    "set-username-text": "To start the ticket sale, you must select a user first from the top left."
+    "set-username-text": "To start the ticket sale, you must select a user first from the top left.",
+    "name-error": "You have to enter a name!",
+    "email-error": "You have to enter a valid e-mail Adress!",
+    "phone-error": "You have to enter a vaild phone number!"
 }

frontend/src/utils/uxFncs.ts

@@ -0,0 +1,16 @@
+import i18n from "./i18n";
+import Cookies from "js-cookie";
+
+export const changeTranslation = () => {
+  const clientLng = i18n.language;
+
+  if (clientLng === "en") {
+    i18n.changeLanguage("de");
+    Cookies.set("language", "de");
+  } else if (clientLng === "de") {
+    i18n.changeLanguage("en");
+    Cookies.set("language", "en");
+  } else {
+    alert("Cannot change language.");
+  }
+};