diff --git a/src/app/admin/surveys/[surveyId]/responses/test/_components/DeleteButton.tsx b/src/app/admin/surveys/[surveyId]/responses/test/_components/DeleteButton.tsx
index 22186f74..fc2ba7c5 100644
--- a/src/app/admin/surveys/[surveyId]/responses/test/_components/DeleteButton.tsx
+++ b/src/app/admin/surveys/[surveyId]/responses/test/_components/DeleteButton.tsx
@@ -3,7 +3,7 @@ import { blueButtonStyles } from "@/src/core/components/links"
 import { AllowedSurveySlugs } from "@/src/survey-public/utils/allowedSurveySlugs"
 import deleteTestSurveyResponses from "@/src/survey-responses/mutations/deleteTestSurveyResponses"
 import { useMutation } from "@blitzjs/rpc"
-import clsx from "clsx"
+import { clsx } from "clsx"
 import { useRouter } from "next/navigation"
 
 type DeleteButtonProps = {
diff --git a/src/core/components/forms/LabeledCheckbox.tsx b/src/core/components/forms/LabeledCheckbox.tsx
index 2e389232..ba67946d 100644
--- a/src/core/components/forms/LabeledCheckbox.tsx
+++ b/src/core/components/forms/LabeledCheckbox.tsx
@@ -41,6 +41,7 @@ export const LabeledCheckbox = forwardRef<HTMLInputElement, LabeledCheckboxProps
       >
         <div className="flex h-5 items-center">
           <input
+            aria-describedby={scope + "Hint"}
             type="checkbox"
             disabled={disabled || isSubmitting}
             readOnly={readonly}
diff --git a/src/survey-public/components/Email.tsx b/src/survey-public/components/Email.tsx
index ebc65ced..b32284d8 100644
--- a/src/survey-public/components/Email.tsx
+++ b/src/survey-public/components/Email.tsx
@@ -10,7 +10,7 @@ type Props = {
   onClickMore: () => void
 }
 
-export const Email: React.FC<Props> = ({ email, onClickMore }) => {
+export const Email = ({ email, onClickMore }: Props) => {
   const { description, button, title, mailjetWidgetUrl, homeUrl } = email
 
   return (
diff --git a/src/survey-public/components/More.tsx b/src/survey-public/components/More.tsx
index 1d7f7f5d..662e77fa 100644
--- a/src/survey-public/components/More.tsx
+++ b/src/survey-public/components/More.tsx
@@ -10,7 +10,7 @@ type Props = {
   more: TMore
 }
 
-export const More: React.FC<Props> = ({ more, onClickMore, onClickFinish }) => {
+export const More = ({ more, onClickMore, onClickFinish }: Props) => {
   useAlertBeforeUnload()
 
   const { title, description, questionText, buttons } = more
diff --git a/src/survey-public/components/Page.tsx b/src/survey-public/components/Page.tsx
index 92312b34..9dd89601 100644
--- a/src/survey-public/components/Page.tsx
+++ b/src/survey-public/components/Page.tsx
@@ -1,20 +1,27 @@
 import { SurveyScreenHeader } from "@/src/survey-public/components/core/layout/SurveyScreenHeader"
 import type { TPage } from "@/src/survey-public/components/types"
+import { useFormContext } from "react-hook-form"
+import { getFormfieldNamesByQuestions } from "../utils/getFormfieldNames"
 import { Question } from "./Question"
-import { SurveyP } from "./core/Text"
 import { SurveyButtonWithAction } from "./core/buttons/SurveyButtonWithAction"
 import { SurveyButtonWrapper } from "./core/buttons/SurveyButtonWrapper"
+import { SurveyFormErrorsBox } from "./core/form/SurveyFormErrorsBox"
 
 type Props = {
   page: TPage
   buttonActions: any
-  completed: boolean
 }
 
-export const Page = ({ page, buttonActions, completed }: Props) => {
+export const Page = ({ page, buttonActions }: Props) => {
+  const {
+    formState: { errors, isSubmitting },
+  } = useFormContext()
+
   if (!page) return null
   const { id: pageId, title, description, questions, buttons } = page
 
+  const relevantQuestionNames = getFormfieldNamesByQuestions(questions!)
+
   return (
     <section>
       <SurveyScreenHeader title={title.de} description={description.de} />
@@ -23,26 +30,20 @@ export const Page = ({ page, buttonActions, completed }: Props) => {
         questions.map((question) => (
           <Question className="mb-2" key={`${pageId}-${question.id}`} question={question} />
         ))}
+      <SurveyFormErrorsBox formErrors={errors} surveyPart="survey" />
       <SurveyButtonWrapper>
         {buttons?.map((button) => {
-          let disabled = false
-          if (["nextPage", "submit"].includes(button.onClick.action)) {
-            disabled = !completed
-          }
           return (
             <SurveyButtonWithAction
               key={`${pageId}-${button.label.de}`}
               buttonActions={buttonActions}
+              relevantQuestionNames={relevantQuestionNames!}
               button={button}
-              disabled={disabled}
+              disabled={isSubmitting}
             />
           )
         })}
       </SurveyButtonWrapper>
-      <SurveyP className="text-sm sm:text-sm">
-        * Pflichtfelder <br />
-        Um fortzufahren, bitte alle Pflichtfelder ausfüllen.
-      </SurveyP>
     </section>
   )
 }
diff --git a/src/survey-public/components/Question.tsx b/src/survey-public/components/Question.tsx
index 397c818e..824d3cd2 100644
--- a/src/survey-public/components/Question.tsx
+++ b/src/survey-public/components/Question.tsx
@@ -1,9 +1,12 @@
 import {
   TFeedbackQuestion,
   TQuestion,
+  TReadOnlyProps,
   TSingleOrMultiResponseProps,
-  TTextProps,
+  TTextareaProps,
+  TTextfieldProps,
 } from "@/src/survey-public/components/types"
+import { getFormfieldName } from "../utils/getFormfieldNames"
 import { SurveyH2 } from "./core/Text"
 import { SurveyLabeledCheckboxGroup } from "./core/form/SurveyLabeledCheckboxGroup"
 import { SurveyLabeledRadiobuttonGroup } from "./core/form/SurveyLabeledRadiobuttonGroup"
@@ -13,15 +16,17 @@ import { SurveyLabeledTextareaField } from "./core/form/SurveyLabeledTextareaFie
 
 type TSingleOrMultuResponseComponentProps = {
   id: number
+  component: TQuestion["component"] | TFeedbackQuestion["component"]
 } & TSingleOrMultiResponseProps
 
-const SingleResponseComponent: React.FC<TSingleOrMultuResponseComponentProps> = ({
+const SingleResponseComponent = ({
   id,
   responses,
-}) => (
+  component,
+}: TSingleOrMultuResponseComponentProps) => (
   <SurveyLabeledRadiobuttonGroup
     items={responses.map((item) => ({
-      scope: `single-${id}`,
+      scope: getFormfieldName(component, id),
       name: `${id}-${item.id}`,
       label: item.text.de,
       help: item?.help?.de,
@@ -30,58 +35,79 @@ const SingleResponseComponent: React.FC<TSingleOrMultuResponseComponentProps> =
   />
 )
 
-const MultipleResponseComponent: React.FC<TSingleOrMultuResponseComponentProps> = ({
+const MultipleResponseComponent = ({
   id,
   responses,
-}) => (
+  component,
+}: TSingleOrMultuResponseComponentProps) => (
   <SurveyLabeledCheckboxGroup
     key={id}
     items={responses.map((item) => ({
-      name: `multi-${id}-${item.id}`,
+      name: `${getFormfieldName(component, id)}-${item.id}`,
       label: item.text.de,
       help: item?.help?.de,
     }))}
   />
 )
 
-type TTextResponseComponentProps = {
+type TTextfieldResponseComponentProps = {
   id: number
-} & TTextProps
+  component: TQuestion["component"] | TFeedbackQuestion["component"]
+} & TTextfieldProps
+
+type TTextareaResponseComponentProps = {
+  id: number
+  component: TQuestion["component"] | TFeedbackQuestion["component"]
+} & TTextareaProps
+
 type TReadOnlyResponseComponentProps = {
   id: number
-  queryId: string
-} & TTextProps
+  component: TQuestion["component"] | TFeedbackQuestion["component"]
+} & TReadOnlyProps
 
-const TextResponseComponent: React.FC<TTextResponseComponentProps> = ({
+const TextResponseComponent = ({
   id,
   placeholder,
   caption,
-  maxLength,
-}) => (
+  validation,
+  component,
+}: TTextareaResponseComponentProps) => (
   <>
     <SurveyLabeledTextareaField
-      name={`text-${id}`}
+      name={getFormfieldName(component, id)}
       label={""}
       placeholder={placeholder?.de}
       caption={caption?.de}
-      maxLength={maxLength}
+      maxLength={validation?.maxLength}
     />
   </>
 )
 
-const TextFieldResponseComponent: React.FC<TTextResponseComponentProps> = ({ id, placeholder }) => (
+const TextFieldResponseComponent = ({
+  id,
+  placeholder,
+  component,
+}: TTextfieldResponseComponentProps) => (
   <>
-    <SurveyLabeledTextField name={`text-${id}`} placeholder={placeholder?.de} label={""} />
+    <SurveyLabeledTextField
+      name={getFormfieldName(component, id)}
+      placeholder={placeholder?.de}
+      label={""}
+    />
   </>
 )
 
-const ReadOnlyResponseComponent: React.FC<TReadOnlyResponseComponentProps> = ({ id, queryId }) => (
+const ReadOnlyResponseComponent = ({ id, queryId, component }: TReadOnlyResponseComponentProps) => (
   <>
-    <SurveyLabeledReadOnlyTextField readOnly name={`text-${id}`} label={""} queryId={queryId} />
+    <SurveyLabeledReadOnlyTextField
+      readOnly
+      name={getFormfieldName(component, id)}
+      label={""}
+      queryId={queryId}
+    />
   </>
 )
 
-// TODO type
 const CustomComponent = (props: any) => (
   <div className="border-2 border-black bg-gray-200 p-1">
     <code>
@@ -101,16 +127,22 @@ const components = {
 
 type Props = { question: TQuestion | TFeedbackQuestion; className?: string }
 
-export const Question: React.FC<Props> = ({ question, className }) => {
+export const Question = ({ question, className }: Props) => {
   const { id, help, label, component, props } = question
   // @ts-expect-error
   const Component = components[component] || null
+
+  // todo validation: atm multipleResponse is always optional - we have to change this in the future
+  // @ts-expect-error
+  const isOptional = component === "multipleResponse" || props?.validation?.optional
   return (
     <div className={className} key={id}>
-      <SurveyH2>{label.de} *</SurveyH2>
+      <SurveyH2>
+        {label.de} {isOptional && " (optional)"}
+      </SurveyH2>
       {help && <div className="-mt-4 mb-6 text-sm text-gray-400">{help.de}</div>}
       {/* @ts-ignore */}
-      {Component && <Component id={id} {...props} />}
+      {Component && <Component component={component} id={id} {...props} />}
     </div>
   )
 }
diff --git a/src/survey-public/components/Start.tsx b/src/survey-public/components/Start.tsx
index 93af5204..7df140cf 100644
--- a/src/survey-public/components/Start.tsx
+++ b/src/survey-public/components/Start.tsx
@@ -4,7 +4,7 @@ import { SurveyButtonWrapper } from "./core/buttons/SurveyButtonWrapper"
 
 type Props = { onStartClick: () => void; startContent: React.ReactNode; disabled: boolean }
 
-export const Start: React.FC<Props> = ({ onStartClick, startContent, disabled }) => {
+export const Start = ({ onStartClick, startContent, disabled }: Props) => {
   useAlertBeforeUnload()
 
   return (
diff --git a/src/survey-public/components/Survey.tsx b/src/survey-public/components/Survey.tsx
index d26169d0..728a97d0 100644
--- a/src/survey-public/components/Survey.tsx
+++ b/src/survey-public/components/Survey.tsx
@@ -10,7 +10,6 @@ import { useAlertBeforeUnload } from "../utils/useAlertBeforeUnload"
 
 type Props = {
   survey: TSurvey
-  isPageCompleted: boolean
   setStage: (value: SetStateAction<"SURVEY" | "MORE" | "FEEDBACK" | "EMAIL" | "START">) => void
   surveyPageProgressProps: {
     surveyPageProgress: number
@@ -18,18 +17,19 @@ type Props = {
   }
 }
 
-export const Survey: React.FC<Props> = ({
+export const Survey = ({
   survey,
   setStage,
-  isPageCompleted,
   surveyPageProgressProps: { surveyPageProgress, setSurveyPageProgress },
-}) => {
+}: Props) => {
   const { setProgress } = useContext(ProgressContext)
 
   useAlertBeforeUnload()
 
-  // for debugging
-  const { getValues } = useFormContext()
+  const {
+    // for debugging
+    getValues,
+  } = useFormContext()
   const responsesForDebugging = getValues()
 
   const handleNextPage = () => {
@@ -66,7 +66,7 @@ export const Survey: React.FC<Props> = ({
           <pre>{JSON.stringify(responsesForDebugging, null, 2)}</pre>
         </code>
       </Debug>
-      {page && <Page page={page} buttonActions={buttonActions} completed={isPageCompleted} />}
+      {page && <Page page={page} buttonActions={buttonActions} />}
     </>
   )
 }
diff --git a/src/survey-public/components/SurveyInactivePage.tsx b/src/survey-public/components/SurveyInactivePage.tsx
index 2bcc5a9e..7f0a52f1 100644
--- a/src/survey-public/components/SurveyInactivePage.tsx
+++ b/src/survey-public/components/SurveyInactivePage.tsx
@@ -1,5 +1,4 @@
 import { SurveyLayout } from "@/src/survey-public/components/core/layout/SurveyLayout"
-import { BlitzPage } from "@blitzjs/next"
 import { useEffect } from "react"
 import { SurveyScreenHeader } from "./core/layout/SurveyScreenHeader"
 import { SurveyLink } from "./core/links/SurveyLink"
@@ -7,7 +6,7 @@ import { TSurvey } from "./types"
 type Props = {
   surveyDefinition: TSurvey
 }
-const SurveyInactivePage: BlitzPage<Props> = ({ surveyDefinition }) => {
+const SurveyInactivePage = ({ surveyDefinition }: Props) => {
   useEffect(() => {
     const root = document.documentElement
     root.style.setProperty("--survey-primary-color", surveyDefinition.primaryColor)
diff --git a/src/survey-public/components/SurveyMainPage.tsx b/src/survey-public/components/SurveyMainPage.tsx
index 908b5e63..4a927a43 100644
--- a/src/survey-public/components/SurveyMainPage.tsx
+++ b/src/survey-public/components/SurveyMainPage.tsx
@@ -13,9 +13,11 @@ import surveyFeedbackEmail from "@/src/survey-responses/mutations/surveyFeedback
 import createSurveySession from "@/src/survey-sessions/mutations/createSurveySession"
 import { useParam } from "@blitzjs/next"
 import { useMutation } from "@blitzjs/rpc"
-import { useCallback, useEffect, useState } from "react"
-import { getCompletedQuestionIds } from "../utils/getCompletedQuestionIds"
+import { useEffect, useState } from "react"
+import { createSurveySchema } from "../utils/createSurveySchema"
 import { getBackendConfigBySurveySlug } from "../utils/getConfigBySurveySlug"
+import { getFormfieldName } from "../utils/getFormfieldNames"
+import { getQuestionsAsArray } from "../utils/getQuestionsAsArray"
 import PublicSurveyForm from "./core/form/PublicSurveyForm"
 import {
   TEmail,
@@ -42,7 +44,7 @@ type Props = {
   institutionsBboxes?: TInstitutionsBboxes
 }
 
-export const SurveyMainPage: React.FC<Props> = ({
+export const SurveyMainPage = ({
   startContent,
   isStartDisabled = false,
   emailDefinition,
@@ -53,7 +55,7 @@ export const SurveyMainPage: React.FC<Props> = ({
   responseConfig,
   surveyId,
   institutionsBboxes,
-}) => {
+}: Props) => {
   const [stage, setStage] = useState<"START" | "SURVEY" | "MORE" | "FEEDBACK" | "EMAIL">(
     process.env.NEXT_PUBLIC_PUBLIC_SURVEY_START_STAGE || "START",
   )
@@ -68,11 +70,28 @@ export const SurveyMainPage: React.FC<Props> = ({
   const [createSurveyResponseMutation] = useMutation(createSurveyResponse)
   const [surveyFeedbackEmailMutation] = useMutation(surveyFeedbackEmail)
   const [surveyPageProgress, setSurveyPageProgress] = useState(0)
-  const [isSurveyPageCompleted, setIsSurveyPageCompleted] = useState(false)
-  const [isFirstPageCompleted, setIsFirstPageCompleted] = useState(false)
-  const [isSecondPageCompleted, setIsSecondPageCompleted] = useState(false)
   const [isMapDirty, setIsMapDirty] = useState(false)
 
+  const surveyFormSchema = createSurveySchema(
+    getQuestionsAsArray({ definition: surveyDefinition, surveyPart: "survey" }),
+  )
+
+  const { evaluationRefs } = responseConfig
+  const feedbackCategoryId = evaluationRefs["feedback-category"]
+  const feedbackLocationId = evaluationRefs["feedback-location"]
+  const feedbackFirstPageQuestions = feedbackDefinition.pages.find((p) => p.id === 1)!.questions
+  let feedbackSecondPageQuestions = feedbackDefinition.pages
+    .find((p) => p.id === 2)!
+    .questions.filter((q) => q.id !== feedbackLocationId)
+  const feedbackQuestions = [
+    feedbackFirstPageQuestions.find((q) => q.id === feedbackCategoryId)!,
+    // todo clean up or refactor after survey BB
+    // for BB we have a the map for line selection on the first page - so we manually add it here for validation
+    feedbackFirstPageQuestions.find((q) => q.id === 21)!,
+    ...feedbackSecondPageQuestions,
+  ]
+  const feedbackFormSchema = createSurveySchema(feedbackQuestions)
+
   useEffect(() => {
     const root = document.documentElement
     root.style.setProperty("--survey-primary-color", surveyDefinition.primaryColor)
@@ -90,9 +109,6 @@ export const SurveyMainPage: React.FC<Props> = ({
     }
   }
 
-  const feedbackFirstPageQuestionIds = feedbackDefinition.pages[0]?.questions.map((q) => q.id)
-  const secondPageQuestionIds = feedbackDefinition.pages[1]?.questions.map((q) => q.id)
-
   const isUserLocationQuestionId = responseConfig.evaluationRefs["is-feedback-location"]
   const userLocationQuestionId = responseConfig.evaluationRefs["feedback-location"]
 
@@ -135,8 +151,9 @@ export const SurveyMainPage: React.FC<Props> = ({
   }
 
   const handleFeedbackSubmit = async (values: Record<string, any>, submitterId?: string) => {
-    if (values[`single-${isUserLocationQuestionId}`] === "2")
-      values[`map-${userLocationQuestionId}`] = "" // if "no location" is chosen, set location value to empty string
+    // if "no location" ("2") is chosen, set location value to empty string
+    if (values[getFormfieldName("singleResponse", isUserLocationQuestionId)] === "2")
+      values[getFormfieldName("map", userLocationQuestionId)] = ""
     values = transformValues(values)
     delete values[isUserLocationQuestionId!] // delete map ja/nein response
     // await handleSubmitFeedback({ ...values }, submitterId)
@@ -180,50 +197,6 @@ export const SurveyMainPage: React.FC<Props> = ({
     scrollToTopWithDelay()
   }
 
-  const handleSurveyChange = useCallback(
-    (values: Record<string, any>) => {
-      const { pages } = surveyDefinition
-      const questions = pages[surveyPageProgress]!.questions
-      const pageQuestionIds = questions?.map((q) => q.id)
-
-      const completedQuestionIds = getCompletedQuestionIds(values)
-
-      if (!questions || !questions.length) {
-        setIsSurveyPageCompleted(true)
-      } else {
-        // check if all questions from page have been answered; compare arrays
-        setIsSurveyPageCompleted(
-          pageQuestionIds!.every((val) => completedQuestionIds.includes(val)),
-        )
-      }
-    },
-    [surveyDefinition, surveyPageProgress],
-  )
-
-  const handleFeedbackChange = useCallback(
-    (values: Record<string, any>) => {
-      const completedQuestionIds = getCompletedQuestionIds(values)
-      // check if all questions from page 1 and 2 have been answered; compare arrays
-      setIsFirstPageCompleted(
-        feedbackFirstPageQuestionIds!.every((val) => completedQuestionIds.includes(val)),
-      )
-      setIsSecondPageCompleted(
-        values[`single-${isUserLocationQuestionId}`] === "1"
-          ? secondPageQuestionIds!.every((val) => completedQuestionIds.includes(val)) && isMapDirty
-          : secondPageQuestionIds!
-              .filter((id) => id !== userLocationQuestionId)
-              .every((val) => completedQuestionIds.includes(val)),
-      )
-    },
-    [
-      isMapDirty,
-      isUserLocationQuestionId,
-      feedbackFirstPageQuestionIds,
-      secondPageQuestionIds,
-      userLocationQuestionId,
-    ],
-  )
-
   const handleEmailToFeedback = () => {
     setFeedbackKey(feedbackKey + 1)
     setStage("FEEDBACK")
@@ -249,7 +222,6 @@ export const SurveyMainPage: React.FC<Props> = ({
         <Survey
           surveyPageProgressProps={{ surveyPageProgress, setSurveyPageProgress }}
           setStage={setStage}
-          isPageCompleted={isSurveyPageCompleted}
           survey={surveyDefinition}
         />
       )
@@ -272,8 +244,6 @@ export const SurveyMainPage: React.FC<Props> = ({
           feedback={feedbackDefinition}
           responseConfig={responseConfig}
           onBackClick={handleFeedbackToMore}
-          isFirstPageCompletedProps={{ isFirstPageCompleted, setIsFirstPageCompleted }}
-          isSecondPageCompletedProps={{ isSecondPageCompleted, setIsSecondPageCompleted }}
           setIsMapDirty={setIsMapDirty}
         />
       )
@@ -315,14 +285,14 @@ export const SurveyMainPage: React.FC<Props> = ({
     <ProgressContext.Provider value={{ progress, setProgress }}>
       <SurveyLayout canonicalUrl={surveyDefinition.canonicalUrl} logoUrl={surveyDefinition.logoUrl}>
         <Debug className="border border-red-500">
-          <code>stage: {stage}</code>{" "}
+          <code>stage: {stage}</code>
         </Debug>
         <div className={isSpinner ? "blur-sm" : ""}>
           {stage === "START" || stage === "SURVEY" ? (
             <PublicSurveyForm
+              schema={surveyFormSchema}
               // key is necessary to reset form state when switching between survey and feedback part
               key={1}
-              onChangeValues={handleSurveyChange}
               onSubmit={handleSurveySubmit}
             >
               {component}
@@ -331,8 +301,8 @@ export const SurveyMainPage: React.FC<Props> = ({
             <PublicSurveyForm
               // feedback key / updating the key is necessary to reset form state when feedback part is filled out multiple times
               key={2 + feedbackKey}
+              schema={feedbackFormSchema}
               onSubmit={handleFeedbackSubmit}
-              onChangeValues={handleFeedbackChange}
             >
               {component}
             </PublicSurveyForm>
diff --git a/src/survey-public/components/core/Debug.tsx b/src/survey-public/components/core/Debug.tsx
index e8a12389..ecf4a40b 100644
--- a/src/survey-public/components/core/Debug.tsx
+++ b/src/survey-public/components/core/Debug.tsx
@@ -4,7 +4,7 @@ type Props = {
   children: React.ReactNode
 } & React.ButtonHTMLAttributes<HTMLDivElement>
 
-export const Debug: React.FC<Props> = ({ children, ...props }) => {
+export const Debug = ({ children, ...props }: Props) => {
   if (isDev) return <div {...props}>{children}</div>
   return null
 }
diff --git a/src/survey-public/components/core/SurveyMarkdown.tsx b/src/survey-public/components/core/SurveyMarkdown.tsx
index dc1bb8b2..48d20e15 100644
--- a/src/survey-public/components/core/SurveyMarkdown.tsx
+++ b/src/survey-public/components/core/SurveyMarkdown.tsx
@@ -37,7 +37,7 @@ const proseClassesSurvey = clsx(
   "prose-h2:mb-4 prose-h2:mt-8 prose-h2:text-lg prose-h2:font-bold prose-h2:text-gray-900 prose-ol:text-base prose-h2:sm:text-xl prose-ol:sm:text-lg",
 )
 
-export const SurveyMarkdown: React.FC<Props> = ({ markdown, className }) => {
+export const SurveyMarkdown = ({ markdown, className }: Props) => {
   if (!markdown) return null
 
   return (
diff --git a/src/survey-public/components/core/SurveyMetaTags.tsx b/src/survey-public/components/core/SurveyMetaTags.tsx
index 03ef6d04..14e360dd 100644
--- a/src/survey-public/components/core/SurveyMetaTags.tsx
+++ b/src/survey-public/components/core/SurveyMetaTags.tsx
@@ -5,7 +5,7 @@ type Props = {
   canonicalUrl?: string
 }
 
-export const SurveyMetaTags: React.FC<Props> = ({ title, canonicalUrl }) => {
+export const SurveyMetaTags = ({ title, canonicalUrl }: Props) => {
   return (
     <Head>
       <title>{title}</title>
diff --git a/src/survey-public/components/core/buttons/SurveyButton.tsx b/src/survey-public/components/core/buttons/SurveyButton.tsx
index 22268b88..b22ffd24 100644
--- a/src/survey-public/components/core/buttons/SurveyButton.tsx
+++ b/src/survey-public/components/core/buttons/SurveyButton.tsx
@@ -4,11 +4,10 @@ import { surveyPrimaryColorButtonStyles, surveyWhiteButtonStyles } from "../link
 
 type Props = {
   color?: string
-  disabled?: boolean
   children: string | ReactNode
 } & React.ButtonHTMLAttributes<HTMLButtonElement>
 
-export const SurveyButton: React.FC<Props> = ({ disabled, color, children, ...props }) => {
+export const SurveyButton = ({ color, children, ...props }: Props) => {
   let colorClass: string
   switch (color) {
     case "white":
@@ -22,7 +21,7 @@ export const SurveyButton: React.FC<Props> = ({ disabled, color, children, ...pr
   }
 
   return (
-    <button disabled={disabled} {...props} className={clsx("px-12", colorClass)}>
+    <button {...props} className={clsx("px-12", colorClass)}>
       {children}
     </button>
   )
diff --git a/src/survey-public/components/core/buttons/SurveyButtonWithAction.tsx b/src/survey-public/components/core/buttons/SurveyButtonWithAction.tsx
index 92b27105..a9c99320 100644
--- a/src/survey-public/components/core/buttons/SurveyButtonWithAction.tsx
+++ b/src/survey-public/components/core/buttons/SurveyButtonWithAction.tsx
@@ -1,35 +1,53 @@
 import { TButtonWithAction } from "@/src/survey-public/components/types"
+import { useFormContext } from "react-hook-form"
 import { SurveyButton } from "./SurveyButton"
 
 type Props = {
   button: TButtonWithAction
   buttonActions: { next: () => void; back: () => void }
-  disabled?: boolean
-}
+  relevantQuestionNames: string[]
+} & React.ButtonHTMLAttributes<HTMLButtonElement>
 
-export const SurveyButtonWithAction: React.FC<Props> = ({ disabled, button, buttonActions }) => {
+export const SurveyButtonWithAction = ({
+  button,
+  relevantQuestionNames,
+  buttonActions,
+  ...props
+}: Props) => {
+  const { trigger, clearErrors } = useFormContext()
   const { label, color, onClick } = button
 
-  if (onClick.action === "submit")
+  const handleNextClick = async () => {
+    const isValid = await trigger(relevantQuestionNames)
+    if (isValid) {
+      buttonActions.next()
+    }
+  }
+  const handleBackClick = async () => {
+    clearErrors()
+    buttonActions.back()
+  }
+
+  if (onClick.action === "previousPage") {
     return (
-      <SurveyButton disabled={disabled} color={color} type="submit">
+      <SurveyButton {...props} type="button" color={color} onClick={handleBackClick}>
         {label.de}
       </SurveyButton>
     )
+  }
 
-  let buttonActionSelect: any
-  switch (onClick.action) {
-    case "nextPage":
-      buttonActionSelect = buttonActions.next
-      break
-    case "previousPage":
-      buttonActionSelect = buttonActions.back
-      break
+  if (onClick.action === "nextPage") {
+    return (
+      <SurveyButton {...props} color={color} type="button" onClick={handleNextClick}>
+        {label.de}
+      </SurveyButton>
+    )
   }
 
-  return (
-    <SurveyButton disabled={disabled} type="button" color={color} onClick={buttonActionSelect}>
-      {label.de}
-    </SurveyButton>
-  )
+  if (onClick.action === "submit")
+    return (
+      <SurveyButton {...props} color={color} type="submit">
+        {label.de}
+      </SurveyButton>
+    )
 }
diff --git a/src/survey-public/components/core/buttons/SurveyButtonWrapper.tsx b/src/survey-public/components/core/buttons/SurveyButtonWrapper.tsx
index 9be1e339..94eea21b 100644
--- a/src/survey-public/components/core/buttons/SurveyButtonWrapper.tsx
+++ b/src/survey-public/components/core/buttons/SurveyButtonWrapper.tsx
@@ -4,7 +4,7 @@ type Props = {
   children: ReactNode
 }
 
-export const SurveyButtonWrapper: React.FC<Props> = ({ children }) => {
+export const SurveyButtonWrapper = ({ children }: Props) => {
   return (
     <div className="flex flex-col gap-6 pt-10 sm:flex-row-reverse sm:items-start sm:justify-between sm:space-y-0">
       {children}
diff --git a/src/survey-public/components/core/form/PublicSurveyForm.tsx b/src/survey-public/components/core/form/PublicSurveyForm.tsx
index 38bc2349..3f0a36c6 100644
--- a/src/survey-public/components/core/form/PublicSurveyForm.tsx
+++ b/src/survey-public/components/core/form/PublicSurveyForm.tsx
@@ -28,6 +28,8 @@ export function PublicSurveyForm<S extends z.ZodType<any, any>>({
     mode: "onBlur",
     resolver: schema ? zodResolver(schema) : undefined,
     defaultValues: initialValues,
+    reValidateMode: "onChange",
+    criteriaMode: "all",
   })
   useEffect(() => {
     if (onChangeValues) {
diff --git a/src/survey-public/components/core/form/SurveyFormErrorsBox.tsx b/src/survey-public/components/core/form/SurveyFormErrorsBox.tsx
new file mode 100644
index 00000000..90017750
--- /dev/null
+++ b/src/survey-public/components/core/form/SurveyFormErrorsBox.tsx
@@ -0,0 +1,59 @@
+import {
+  getFeedbackDefinitionBySurveySlug,
+  getSurveyDefinitionBySurveySlug,
+} from "@/src/survey-public/utils/getConfigBySurveySlug"
+import { getQuestionsAsArray } from "@/src/survey-public/utils/getQuestionsAsArray"
+import { useParam } from "@blitzjs/next"
+import { XCircleIcon } from "@heroicons/react/20/solid"
+import { FieldErrors, FieldValues } from "react-hook-form"
+
+type Props = {
+  formErrors: FieldErrors<FieldValues>
+  customErrors?: { [key: string]: { message: string } }
+  surveyPart: "survey" | "feedback"
+}
+
+export const SurveyFormErrorsBox = ({ formErrors, surveyPart, customErrors }: Props) => {
+  const surveySlug = useParam("surveySlug", "string")
+  if (!Object.keys(formErrors).length && !customErrors) return null
+
+  const definition =
+    surveyPart === "survey"
+      ? // @ts-expect-error
+        getSurveyDefinitionBySurveySlug(surveySlug!)
+      : // @ts-expect-error
+        getFeedbackDefinitionBySurveySlug(surveySlug!)
+
+  const questions = getQuestionsAsArray({ definition, surveyPart })
+
+  return (
+    <div className="mt-12 flex gap-4 rounded-lg bg-red-50 p-4">
+      <XCircleIcon className="h-6 w-6 shrink-0 text-red-500" />
+      <ul>
+        {customErrors &&
+          Object.entries(customErrors)?.map(([key, error]) => {
+            const questionText = questions.find(
+              (question) => question?.id == Number(key.split("-")[1]),
+            )?.label.de
+            return (
+              <li key={key + error.message} id={key + "Hint"} className="text-sm text-red-800">
+                <span className="font-semibold">{questionText}</span>: {error.message}
+              </li>
+            )
+          })}
+        {Object.entries(formErrors)?.map(([key, error]) => {
+          const questionText = questions.find(
+            (question) => question?.id == Number(key.split("-")[1]),
+          )?.label.de
+          return (
+            // @ts-expect-error
+            <li key={key + error.message} id={key + "Hint"} className="text-sm text-red-800">
+              {/* @ts-expect-error */}
+              <span className="font-semibold">{questionText}</span>: {error.message}
+            </li>
+          )
+        })}
+      </ul>
+    </div>
+  )
+}
diff --git a/src/survey-public/components/core/form/SurveyLabeledCheckbox.tsx b/src/survey-public/components/core/form/SurveyLabeledCheckbox.tsx
index 810106cf..31fc2f5c 100644
--- a/src/survey-public/components/core/form/SurveyLabeledCheckbox.tsx
+++ b/src/survey-public/components/core/form/SurveyLabeledCheckbox.tsx
@@ -36,7 +36,7 @@ export const SurveyLabeledCheckbox = forwardRef<HTMLInputElement, TSurveyLabeled
               props?.className,
               "h-4 w-4 cursor-pointer rounded group-hover:border-gray-400",
               hasError
-                ? "border-red-800 text-red-500 shadow-sm shadow-red-200 focus:ring-red-800"
+                ? "border-red-500 text-red-500 shadow-sm shadow-red-200 focus:ring-red-500"
                 : `border-gray-300 text-[var(--survey-primary-color)] focus:ring-0`,
             )}
           />
@@ -53,7 +53,7 @@ export const SurveyLabeledCheckbox = forwardRef<HTMLInputElement, TSurveyLabeled
           {help && <div className="m-0 text-gray-400">{help}</div>}
           <ErrorMessage
             render={({ message }) => (
-              <p role="alert" className="m-0 text-sm text-red-800">
+              <p role="alert" className="m-0 text-sm text-red-500">
                 {message}
               </p>
             )}
diff --git a/src/survey-public/components/core/form/SurveyLabeledCheckboxGroup.tsx b/src/survey-public/components/core/form/SurveyLabeledCheckboxGroup.tsx
index c46d9cd7..c3de4893 100644
--- a/src/survey-public/components/core/form/SurveyLabeledCheckboxGroup.tsx
+++ b/src/survey-public/components/core/form/SurveyLabeledCheckboxGroup.tsx
@@ -6,7 +6,7 @@ type Props = {
   className?: string
 }
 
-export const SurveyLabeledCheckboxGroup: React.FC<Props> = ({ items, className }) => {
+export const SurveyLabeledCheckboxGroup = ({ items, className }: Props) => {
   return (
     <div className={clsx(className, "space-y-2")}>
       {items.map((item, index) => {
diff --git a/src/survey-public/components/core/form/SurveyLabeledRadiobutton.tsx b/src/survey-public/components/core/form/SurveyLabeledRadiobutton.tsx
index 72fc64d2..fd0130c7 100644
--- a/src/survey-public/components/core/form/SurveyLabeledRadiobutton.tsx
+++ b/src/survey-public/components/core/form/SurveyLabeledRadiobutton.tsx
@@ -35,6 +35,7 @@ export const SurveyLabeledRadiobutton = forwardRef<HTMLInputElement, SurveyLabel
       <div {...outerProps} className={clsx(outerProps?.className, "group flex w-full items-start")}>
         <div className="flex h-full min-h-[2.5rem] items-center py-2">
           <input
+            aria-describedby={scope + "Hint"}
             type="radio"
             disabled={isSubmitting}
             value={value}
@@ -44,7 +45,7 @@ export const SurveyLabeledRadiobutton = forwardRef<HTMLInputElement, SurveyLabel
             className={clsx(
               "h-4 w-4 cursor-pointer group-hover:border-gray-400",
               hasError
-                ? "border-red-800 text-red-500 shadow-sm shadow-red-200 focus:ring-red-800"
+                ? "border-red-500 text-red-500 shadow-sm shadow-red-200 focus:ring-red-500"
                 : `border-gray-300 text-[var(--survey-primary-color)] focus:ring-0`,
             )}
           />
@@ -58,7 +59,7 @@ export const SurveyLabeledRadiobutton = forwardRef<HTMLInputElement, SurveyLabel
           {help && <div className="m-0 text-gray-400">{help}</div>}
           <ErrorMessage
             render={({ message }) => (
-              <p role="alert" className="m-0 text-sm text-red-800">
+              <p role="alert" className="m-0 text-sm text-red-500">
                 {message}
               </p>
             )}
diff --git a/src/survey-public/components/core/form/SurveyLabeledRadiobuttonGroup.tsx b/src/survey-public/components/core/form/SurveyLabeledRadiobuttonGroup.tsx
index 9f57155d..3a7bb7da 100644
--- a/src/survey-public/components/core/form/SurveyLabeledRadiobuttonGroup.tsx
+++ b/src/survey-public/components/core/form/SurveyLabeledRadiobuttonGroup.tsx
@@ -1,3 +1,5 @@
+import { clsx } from "clsx"
+import { useFormContext } from "react-hook-form"
 import { SurveyLabeledRadiobutton, SurveyLabeledRadiobuttonProps } from "./SurveyLabeledRadiobutton"
 
 type Props = {
@@ -5,9 +7,14 @@ type Props = {
   className?: string
 }
 
-export const SurveyLabeledRadiobuttonGroup: React.FC<Props> = ({ items, className }) => {
+export const SurveyLabeledRadiobuttonGroup = ({ items, className }: Props) => {
+  const {
+    formState: { errors },
+  } = useFormContext()
+  // @ts-expect-error
+  const groupHasError = Boolean(errors[items[0].scope])
   return (
-    <div className={className}>
+    <div className={clsx(className, groupHasError && "-mx-2 rounded-lg bg-red-50 px-2")}>
       {items.map((item) => {
         return <SurveyLabeledRadiobutton key={item.name} {...item} />
       })}
diff --git a/src/survey-public/components/core/form/SurveyLabeledTextField.tsx b/src/survey-public/components/core/form/SurveyLabeledTextField.tsx
index e16d55a3..7ed9138e 100644
--- a/src/survey-public/components/core/form/SurveyLabeledTextField.tsx
+++ b/src/survey-public/components/core/form/SurveyLabeledTextField.tsx
@@ -63,7 +63,7 @@ export const SurveyLabeledTextField = forwardRef<HTMLInputElement, LabeledTextFi
           className={clsx(
             "block w-full appearance-none rounded-md border px-3 py-2 placeholder-gray-400 shadow-sm focus:outline-none sm:text-sm",
             hasError
-              ? "border-red-800 shadow-red-200 focus:border-red-800 focus:ring-red-800"
+              ? "border-red-500 shadow-red-200 focus:border-red-500 focus:ring-red-500"
               : "border-gray-300 focus:border-[var(--survey-primary-color)] focus:ring-[var(--survey-primary-color)]",
           )}
         />
@@ -71,7 +71,7 @@ export const SurveyLabeledTextField = forwardRef<HTMLInputElement, LabeledTextFi
 
         <ErrorMessage
           render={({ message }) => (
-            <div role="alert" className="mt-1 text-sm text-red-800">
+            <div role="alert" className="mt-1 text-sm text-red-500">
               {message}
             </div>
           )}
diff --git a/src/survey-public/components/core/form/SurveyLabeledTextareaField.tsx b/src/survey-public/components/core/form/SurveyLabeledTextareaField.tsx
index 75789bf3..beba3eed 100644
--- a/src/survey-public/components/core/form/SurveyLabeledTextareaField.tsx
+++ b/src/survey-public/components/core/form/SurveyLabeledTextareaField.tsx
@@ -59,7 +59,7 @@ export const SurveyLabeledTextareaField = forwardRef<
           textareaClasName,
           "mt-1 block h-52 w-full rounded-md shadow-sm sm:text-sm",
           hasError
-            ? "border-red-800 shadow-red-200 focus:border-red-800 focus:ring-red-800"
+            ? "border-red-500 shadow-red-200 focus:border-red-500 focus:ring-red-500"
             : "border-gray-300 focus:border-[var(--survey-primary-color)] focus:ring-[var(--survey-dark-color)]",
         )}
       />
@@ -67,7 +67,7 @@ export const SurveyLabeledTextareaField = forwardRef<
 
       <ErrorMessage
         render={({ message }) => (
-          <div role="alert" className="mt-1 text-sm text-red-800">
+          <div role="alert" className="mt-1 text-sm text-red-500">
             {message}
           </div>
         )}
diff --git a/src/survey-public/components/core/layout/SurveyFooterLinkList.tsx b/src/survey-public/components/core/layout/SurveyFooterLinkList.tsx
index 8e0a13c2..66060409 100644
--- a/src/survey-public/components/core/layout/SurveyFooterLinkList.tsx
+++ b/src/survey-public/components/core/layout/SurveyFooterLinkList.tsx
@@ -13,7 +13,7 @@ type Props = {
   className?: string
 }
 
-export const SurveyFooterLinkList: React.FC<Props> = ({ linkList, className }) => {
+export const SurveyFooterLinkList = ({ linkList, className }: Props) => {
   return (
     <div className="space-y-3">
       <p className="text-sm font-semibold text-gray-400">RECHTLICHES</p>
diff --git a/src/survey-public/components/core/layout/SurveyHeader.tsx b/src/survey-public/components/core/layout/SurveyHeader.tsx
index b8c916e1..42b45dbb 100644
--- a/src/survey-public/components/core/layout/SurveyHeader.tsx
+++ b/src/survey-public/components/core/layout/SurveyHeader.tsx
@@ -8,7 +8,7 @@ type Props = {
   landingPageUrl: string
 }
 
-export const SurveyHeader: React.FC<Props> = ({ logoSrc, landingPageUrl }) => {
+export const SurveyHeader = ({ logoSrc, landingPageUrl }: Props) => {
   return (
     <nav className="z-20 shadow-xl">
       <div className="mx-auto flex items-center justify-between px-2 text-gray-500 sm:px-6 lg:pl-5 lg:pr-2.5">
diff --git a/src/survey-public/components/core/layout/SurveyScreenHeader.tsx b/src/survey-public/components/core/layout/SurveyScreenHeader.tsx
index 24e8becd..b696bd10 100644
--- a/src/survey-public/components/core/layout/SurveyScreenHeader.tsx
+++ b/src/survey-public/components/core/layout/SurveyScreenHeader.tsx
@@ -1,12 +1,12 @@
 import { SurveyMarkdown } from "../SurveyMarkdown"
 import { SurveyH1 } from "../Text"
 
-export type SurveyScreenHeaderProps = {
+export type Props = {
   title: string
   description?: string
 }
 
-export const SurveyScreenHeader: React.FC<SurveyScreenHeaderProps> = ({ title, description }) => {
+export const SurveyScreenHeader = ({ title, description }: Props) => {
   return (
     <section className="mb-2">
       <div className="mb-8">
diff --git a/src/survey-public/components/feedback/Feedback.tsx b/src/survey-public/components/feedback/Feedback.tsx
index c4e5c191..59682b52 100644
--- a/src/survey-public/components/feedback/Feedback.tsx
+++ b/src/survey-public/components/feedback/Feedback.tsx
@@ -3,6 +3,7 @@ import { scrollToTopWithDelay } from "@/src/survey-public/utils/scrollToTopWithD
 import { useAlertBeforeUnload } from "@/src/survey-public/utils/useAlertBeforeUnload"
 import { useContext, useEffect, useState } from "react"
 import { useFormContext } from "react-hook-form"
+import { getFormfieldName, getFormfieldNamesByQuestions } from "../../utils/getFormfieldNames"
 import { Debug } from "../core/Debug"
 import {
   TFeedback,
@@ -23,17 +24,9 @@ type Props = {
   maptilerUrl: string
   institutionsBboxes?: TInstitutionsBboxes
   setIsMapDirty: (value: boolean) => void
-  isFirstPageCompletedProps: {
-    isFirstPageCompleted: boolean
-    setIsFirstPageCompleted: (value: boolean) => void
-  }
-  isSecondPageCompletedProps: {
-    isSecondPageCompleted: boolean
-    setIsSecondPageCompleted: (value: boolean) => void
-  }
 }
 
-export const Feedback: React.FC<Props> = ({
+export const Feedback = ({
   institutionsBboxes,
   onBackClick,
   feedback,
@@ -41,23 +34,24 @@ export const Feedback: React.FC<Props> = ({
   responseConfig,
   maptilerUrl,
   setIsMapDirty,
-  isFirstPageCompletedProps: { isFirstPageCompleted, setIsFirstPageCompleted },
-  isSecondPageCompletedProps: { isSecondPageCompleted, setIsSecondPageCompleted },
-}) => {
+}: Props) => {
+  const {
+    formState: { errors },
+  } = useFormContext()
+  console.log(errors)
   const { setProgress } = useContext(ProgressContext)
 
   useAlertBeforeUnload()
 
+  const { getValues, setValue, trigger, clearErrors } = useFormContext()
   const [feedbackPageProgress, setFeedbackPageProgress] = useState(0)
-
-  const { getValues, setValue } = useFormContext()
   const responsesForDebugging = getValues()
   const { evaluationRefs } = responseConfig
   const isUserLocationQuestionId = evaluationRefs["is-feedback-location"]
 
   useEffect(() => {
-    // inital value of is location is set to true
-    setValue(`single-${isUserLocationQuestionId}`, "1")
+    // inital value of is location is set to true ("1")
+    setValue(getFormfieldName("singleResponse", isUserLocationQuestionId), "1")
   }, [isUserLocationQuestionId, setValue])
 
   const { pages } = feedback
@@ -71,15 +65,28 @@ export const Feedback: React.FC<Props> = ({
 
   const mapProps = pages[1]?.questions.find((q) => q.id === pinId)?.props as TMapProps
 
-  const handleNextPage = () => {
-    const newFeedbackPageProgress = Math.min(pages.length, feedbackPageProgress + 1)
-    setFeedbackPageProgress(newFeedbackPageProgress)
-    setProgress(stageProgressDefinition["FEEDBACK"] + newFeedbackPageProgress)
-    scrollToTopWithDelay()
+  const relevantQuestionsSecondPage = [
+    pages[0]!.questions.find((q) => q.id === feedbackCategoryId)!,
+    // todo clean up or refactor after survey BB
+    // for BB we have a the map for line selection on the first page - so we manually add it here for validation
+    pages[0]!.questions.find((q) => q.id === 21)!,
+  ]
+
+  const relevantQuestionNamesFirstPage = getFormfieldNamesByQuestions(relevantQuestionsSecondPage)
+
+  const handleFirstToSecondPage = async () => {
+    const isValid = await trigger(relevantQuestionNamesFirstPage)
+    if (isValid) {
+      const newFeedbackPageProgress = 1
+      setFeedbackPageProgress(newFeedbackPageProgress)
+      setProgress(stageProgressDefinition["FEEDBACK"] + newFeedbackPageProgress)
+      scrollToTopWithDelay()
+    }
   }
 
-  const handleBackPage = () => {
-    const newFeedbackPageProgress = Math.max(0, feedbackPageProgress - 1)
+  const handleSecondToFirstPage = () => {
+    clearErrors()
+    const newFeedbackPageProgress = 0
     setFeedbackPageProgress(newFeedbackPageProgress)
     setProgress(stageProgressDefinition["FEEDBACK"] + newFeedbackPageProgress)
     scrollToTopWithDelay()
@@ -97,12 +104,8 @@ export const Feedback: React.FC<Props> = ({
         <FeedbackFirstPage
           institutionsBboxes={institutionsBboxes}
           maptilerUrl={maptilerUrl}
-          isCompletedProps={{
-            isCompleted: isFirstPageCompleted,
-            setIsCompleted: setIsFirstPageCompleted,
-          }}
           page={pages[0]}
-          onButtonClick={handleNextPage}
+          onButtonClick={handleFirstToSecondPage}
           feedbackCategoryId={feedbackCategoryId!}
           legend={mapProps.legend}
           onBackClick={onBackClick}
@@ -110,15 +113,11 @@ export const Feedback: React.FC<Props> = ({
       )}
       {feedbackPageProgress === 1 && (
         <FeedbackSecondPage
-          isCompletedProps={{
-            isCompleted: isSecondPageCompleted,
-            setIsCompleted: setIsSecondPageCompleted,
-          }}
           setIsMapDirty={setIsMapDirty}
           maptilerUrl={maptilerUrl}
           mapProps={mapProps}
           page={pages[1] as TPage}
-          onButtonClick={handleBackPage}
+          onButtonClick={handleSecondToFirstPage}
           userTextIndices={[userText1Id, userText2Id]}
           pinId={pinId}
           isUserLocationQuestionId={isUserLocationQuestionId!}
diff --git a/src/survey-public/components/feedback/FeedbackFirstPage.tsx b/src/survey-public/components/feedback/FeedbackFirstPage.tsx
index ce90d6c0..149f7278 100644
--- a/src/survey-public/components/feedback/FeedbackFirstPage.tsx
+++ b/src/survey-public/components/feedback/FeedbackFirstPage.tsx
@@ -1,10 +1,12 @@
 import { useParams } from "next/navigation"
 import { useRouter } from "next/router"
+import { useFormContext } from "react-hook-form"
 import { MapProvider } from "react-map-gl/maplibre"
 import { Question } from "../Question"
-import { SurveyH2, SurveyP } from "../core/Text"
+import { SurveyH2 } from "../core/Text"
 import { SurveyButton } from "../core/buttons/SurveyButton"
 import { SurveyButtonWrapper } from "../core/buttons/SurveyButtonWrapper"
+import { SurveyFormErrorsBox } from "../core/form/SurveyFormErrorsBox"
 import { SurveyScreenHeader } from "../core/layout/SurveyScreenHeader"
 import { SurveyMapLegend } from "../maps/SurveyMapLegend"
 import { SurveyMapLine } from "../maps/SurveyMapLine"
@@ -16,22 +18,20 @@ type Props = {
   onBackClick: any // TODO
   maptilerUrl: string
   feedbackCategoryId: number
-  isCompletedProps: { isCompleted: boolean; setIsCompleted: (value: boolean) => void }
   institutionsBboxes?: TInstitutionsBboxes
   // todo survey clean up or refactor after survey BB: legend for line map
   legend?: Record<string, Record<string, TLegendItem>>
 }
 
-export const FeedbackFirstPage: React.FC<Props> = ({
+export const FeedbackFirstPage = ({
   page,
   onButtonClick,
   onBackClick,
   maptilerUrl,
-  isCompletedProps: { isCompleted, setIsCompleted },
   feedbackCategoryId,
   institutionsBboxes,
   legend,
-}) => {
+}: Props) => {
   // todo survey clean up or refactor after survey BB ? - initial view state of surveymapline depending on institution
   // maybe this logic should be used for SurveyMap in future surveys
   const router = useRouter()
@@ -45,6 +45,10 @@ export const FeedbackFirstPage: React.FC<Props> = ({
   // @ts-ignore
   const { surveySlug } = useParams()
 
+  const {
+    formState: { errors },
+  } = useFormContext()
+
   const { title, description, buttons, questions } = page
 
   return (
@@ -67,21 +71,17 @@ export const FeedbackFirstPage: React.FC<Props> = ({
                   ],
                 },
               }}
-              setIsCompleted={setIsCompleted} // todo
             />
           </MapProvider>
           {legend && <SurveyMapLegend legend={legend} />}
         </>
       )}
       {/* Category Question */}
+
       <Question question={questions.find((q: TQuestion) => q.id === feedbackCategoryId)} />
+      <SurveyFormErrorsBox formErrors={errors} surveyPart="feedback" />
       <SurveyButtonWrapper>
-        <SurveyButton
-          color={buttons[0].color}
-          disabled={!isCompleted}
-          type="button"
-          onClick={onButtonClick}
-        >
+        <SurveyButton color={buttons[0].color} type="button" onClick={onButtonClick}>
           {buttons[0].label.de}
         </SurveyButton>
         {buttons[1] && (
@@ -90,10 +90,6 @@ export const FeedbackFirstPage: React.FC<Props> = ({
           </SurveyButton>
         )}
       </SurveyButtonWrapper>
-      <SurveyP className="text-sm sm:text-sm">
-        * Pflichtfelder <br />
-        Um fortzufahren, bitte alle Pflichtfelder ausfüllen.
-      </SurveyP>
     </>
   )
 }
diff --git a/src/survey-public/components/feedback/FeedbackSecondPage.tsx b/src/survey-public/components/feedback/FeedbackSecondPage.tsx
index 68230e27..f3f664f1 100644
--- a/src/survey-public/components/feedback/FeedbackSecondPage.tsx
+++ b/src/survey-public/components/feedback/FeedbackSecondPage.tsx
@@ -1,22 +1,24 @@
 import { SurveyScreenHeader } from "@/src/survey-public/components/core/layout/SurveyScreenHeader"
-import { TMapProps, TPage, TTextProps } from "@/src/survey-public/components/types"
-import { Fragment } from "react"
-import { useFormContext } from "react-hook-form"
+import { TMapProps, TPage, TTextareaProps } from "@/src/survey-public/components/types"
+import { Fragment, useState } from "react"
+import { FieldErrors, FieldValues, useFormContext } from "react-hook-form"
 import { MapProvider } from "react-map-gl/maplibre"
+import { getFormfieldName, getFormfieldNamesByQuestions } from "../../utils/getFormfieldNames"
 import { Question } from "../Question"
-import { SurveyH2, SurveyP } from "../core/Text"
+import { SurveyH2 } from "../core/Text"
 import { SurveyButton } from "../core/buttons/SurveyButton"
 import { SurveyButtonWrapper } from "../core/buttons/SurveyButtonWrapper"
+import { SurveyFormErrorsBox } from "../core/form/SurveyFormErrorsBox"
 import { SurveyLabeledTextareaField } from "../core/form/SurveyLabeledTextareaField"
 import { SurveyMap } from "../maps/SurveyMap"
 import { SurveyMapLegend } from "../maps/SurveyMapLegend"
 
 type Props = {
+  formErrors?: FieldErrors<FieldValues>
   mapProps: TMapProps
   maptilerUrl: string
   page: TPage
   onButtonClick: any
-  isCompletedProps: { isCompleted: boolean; setIsCompleted: (value: boolean) => void }
   userTextIndices: (number | undefined)[]
   setIsMapDirty: (value: boolean) => void
   pinId: number
@@ -25,11 +27,10 @@ type Props = {
   userLocationQuestionId: number
 }
 
-export const FeedbackSecondPage: React.FC<Props> = ({
+export const FeedbackSecondPage = ({
   mapProps,
   maptilerUrl,
   page,
-  isCompletedProps: { isCompleted, setIsCompleted },
   onButtonClick,
   userTextIndices,
   setIsMapDirty,
@@ -37,11 +38,27 @@ export const FeedbackSecondPage: React.FC<Props> = ({
   isUserLocationQuestionId,
   lineGeometryId,
   userLocationQuestionId,
-}) => {
+}: Props) => {
   const { title, description, questions, buttons } = page
+  const {
+    formState: { errors, isSubmitting },
+    trigger,
+    watch,
+  } = useFormContext()
+  // watch if user choses to set a pin ("1" -> "Ja"), update component if user choses to set a pin
+  const watchIsMap = watch(getFormfieldName("singleResponse", isUserLocationQuestionId)) === "1"
+  const watchIsLocationValue = watch(getFormfieldName("map", userLocationQuestionId))
+  const [isButtonTouched, setIsButtonTouched] = useState(false)
 
-  // watch if user choses to set a pin, update component if user choses to set a pin
-  const isMap = useFormContext().watch(`single-${isUserLocationQuestionId}`) === "1"
+  const relevantQuestions = questions!.filter(
+    (q) => ![isUserLocationQuestionId, userLocationQuestionId].includes(q.id),
+  )
+  const relevantQuestionNames = getFormfieldNamesByQuestions(relevantQuestions)
+
+  const handleOnClick = () => {
+    setIsButtonTouched(true)
+    trigger(...relevantQuestionNames)
+  }
 
   return (
     <>
@@ -49,7 +66,7 @@ export const FeedbackSecondPage: React.FC<Props> = ({
       {/* @ts-expect-error */}
       <Question question={questions.find((q) => q.id === isUserLocationQuestionId)} />
 
-      {isMap && (
+      {watchIsMap && (
         <>
           <SurveyH2>
             {/* @ts-expect-error */}
@@ -64,10 +81,9 @@ export const FeedbackSecondPage: React.FC<Props> = ({
                 config: mapProps.config,
               }}
               pinId={pinId}
-              questionIds={questions?.map((q) => q.id) || []}
-              setIsCompleted={setIsCompleted}
               // todo survey clean up or refactor after survey BB line selection
               lineGeometryId={lineGeometryId}
+              userLocationQuestionId={userLocationQuestionId}
             />
 
             {mapProps.legend && <SurveyMapLegend legend={mapProps.legend} />}
@@ -78,7 +94,7 @@ export const FeedbackSecondPage: React.FC<Props> = ({
         {userTextIndices.map((questionId) => {
           const q = questions!.find((q) => q.id === questionId)
           if (q) {
-            const userTextQuestionProps = q.props as TTextProps
+            const userTextQuestionProps = q.props as TTextareaProps
             return (
               <Fragment key={q.id}>
                 <SurveyH2>{q.label.de} *</SurveyH2>
@@ -86,8 +102,8 @@ export const FeedbackSecondPage: React.FC<Props> = ({
                 <SurveyLabeledTextareaField
                   caption={userTextQuestionProps.caption?.de}
                   key={q.id}
-                  maxLength={userTextQuestionProps.maxLength ?? 2000}
-                  name={`text-${q.id}`}
+                  maxLength={userTextQuestionProps.validation?.maxLength ?? 2000}
+                  name={getFormfieldName("text", q.id)}
                   placeholder={userTextQuestionProps.placeholder?.de}
                   label={""}
                 />
@@ -96,21 +112,39 @@ export const FeedbackSecondPage: React.FC<Props> = ({
           }
         })}
       </div>
+      {isButtonTouched && (
+        <SurveyFormErrorsBox
+          customErrors={
+            watchIsMap && !watchIsLocationValue
+              ? {
+                  [getFormfieldName("map", userLocationQuestionId)]: {
+                    message:
+                      "Sie haben oben angegeben, dass Sie eine konkrete Stelle auswählen möchten. Das Setzen des Pins ist daher verpflichtend.",
+                  },
+                }
+              : undefined
+          }
+          formErrors={errors}
+          surveyPart="feedback"
+        />
+      )}
       <SurveyButtonWrapper>
         <div className="flex flex-col gap-6">
           <SurveyButton
             color={buttons[0]?.color}
-            disabled={!isCompleted}
             id="submit-more"
-            type="submit"
+            onClick={watchIsMap && !watchIsLocationValue ? handleOnClick : undefined}
+            type={watchIsMap && !watchIsLocationValue ? "button" : "submit"}
+            disabled={isSubmitting}
           >
             {buttons![0]?.label.de}
           </SurveyButton>
           <SurveyButton
             color={buttons[1]?.color}
-            disabled={!isCompleted}
             id="submit-finish"
-            type="submit"
+            onClick={watchIsMap && !watchIsLocationValue ? handleOnClick : undefined}
+            type={watchIsMap && !watchIsLocationValue ? "button" : "submit"}
+            disabled={isSubmitting}
           >
             {buttons![1]?.label.de}
           </SurveyButton>
@@ -119,11 +153,6 @@ export const FeedbackSecondPage: React.FC<Props> = ({
           Zurück
         </SurveyButton>
       </SurveyButtonWrapper>
-
-      <SurveyP className="text-sm sm:text-sm">
-        * Pflichtfelder <br />
-        Um fortzufahren, bitte alle Pflichtfelder ausfüllen.
-      </SurveyP>
     </>
   )
 }
diff --git a/src/survey-public/components/maps/SurveyBackgroundSwitcher.tsx b/src/survey-public/components/maps/SurveyBackgroundSwitcher.tsx
index 4385b1fc..16c864e4 100644
--- a/src/survey-public/components/maps/SurveyBackgroundSwitcher.tsx
+++ b/src/survey-public/components/maps/SurveyBackgroundSwitcher.tsx
@@ -22,7 +22,7 @@ type Props = {
   className: string
 }
 
-export const SurveyBackgroundSwitcher: React.FC<Props> = ({ value, onChange, className }) => {
+export const SurveyBackgroundSwitcher = ({ value, onChange, className }: Props) => {
   return (
     <div className={className}>
       <Listbox value={value} onChange={onChange}>
diff --git a/src/survey-public/components/maps/SurveyMap.tsx b/src/survey-public/components/maps/SurveyMap.tsx
index fc661c73..a5fa2450 100644
--- a/src/survey-public/components/maps/SurveyMap.tsx
+++ b/src/survey-public/components/maps/SurveyMap.tsx
@@ -1,6 +1,5 @@
 import { LayerType } from "@/src/core/components/Map/BackgroundSwitcher"
 import { SurveyBackgroundSwitcher } from "@/src/survey-public/components/maps/SurveyBackgroundSwitcher"
-import { getCompletedQuestionIds } from "@/src/survey-public/utils/getCompletedQuestionIds"
 import { bbox, center, lineString, multiLineString } from "@turf/turf"
 import { clsx } from "clsx"
 import maplibregl from "maplibre-gl"
@@ -31,24 +30,20 @@ export type SurveyMapProps = {
   }
   setIsMapDirty: (value: boolean) => void
   pinId: number
-  // todo as we use SurveyMap in the external survey response form, questionids and setcompleted... are optional
-  // we should seperate these components as the public survey will NOT work without these props
-  questionIds?: number[]
-  setIsCompleted?: (value: boolean) => void
   // todo survey clean up or refactor after survey BBline selection
   lineGeometryId?: number
+  userLocationQuestionId?: number
 }
 
-export const SurveyMap: React.FC<SurveyMapProps> = ({
+export const SurveyMap = ({
   projectMap,
   pinId,
   className,
   setIsMapDirty,
-  questionIds,
-  setIsCompleted,
   lineGeometryId,
+  userLocationQuestionId,
   // todo survey clean up or refactor after survey BB line selection
-}) => {
+}: SurveyMapProps) => {
   const { mainMap } = useMap()
   const [events, logEvents] = useState<Record<string, Object>>({})
   const [isPinInView, setIsPinInView] = useState(true)
@@ -140,18 +135,14 @@ export const SurveyMap: React.FC<SurveyMapProps> = ({
 
   const onMarkerDrag = (event: MarkerDragEvent) => {
     logEvents((_events) => ({ ..._events, onDrag: event.lngLat }))
-    setValue(`map-${pinId}`, {
-      lng: event.lngLat.lng,
-      lat: event.lngLat.lat,
-    })
-    const values = getValues()
-    const completedQuestionIds = getCompletedQuestionIds(values)
-    // todo as we use surveymap in the external survey response form , question ids and setcompleted... are optional
-    // we should seperate these components as the public survey will NOT work without these props
-    // check if all questions from page one have been answered; compare arrays
-    questionIds &&
-      setIsCompleted &&
-      setIsCompleted(questionIds!.every((val) => completedQuestionIds.includes(val)))
+    setValue(
+      `map-${pinId}`,
+      {
+        lng: event.lngLat.lng,
+        lat: event.lngLat.lat,
+      },
+      { shouldValidate: true, shouldDirty: true },
+    )
   }
 
   const onMarkerDragEnd = useCallback((event: MarkerDragEvent) => {
@@ -182,7 +173,11 @@ export const SurveyMap: React.FC<SurveyMapProps> = ({
   }
 
   return (
-    <div className={clsx("h-[500px]", className)}>
+    <div
+      className={clsx("h-[500px]", className)}
+      // todo validation getFormfieldName helper
+      aria-describedby={`map-${userLocationQuestionId}Hint`}
+    >
       <Map
         id="mainMap"
         scrollZoom={false}
diff --git a/src/survey-public/components/maps/SurveyMapBanner.tsx b/src/survey-public/components/maps/SurveyMapBanner.tsx
index cb426d3c..827d3905 100644
--- a/src/survey-public/components/maps/SurveyMapBanner.tsx
+++ b/src/survey-public/components/maps/SurveyMapBanner.tsx
@@ -6,7 +6,7 @@ type Props = {
   action?: () => void
 }
 
-export const SurveyMapBanner: React.FC<Props> = ({ status, className, action }) => {
+export const SurveyMapBanner = ({ status, className, action }: Props) => {
   switch (status) {
     case "default":
       return (
diff --git a/src/survey-public/components/maps/SurveyMapLegend.tsx b/src/survey-public/components/maps/SurveyMapLegend.tsx
index fa393f28..bd3e40d8 100644
--- a/src/survey-public/components/maps/SurveyMapLegend.tsx
+++ b/src/survey-public/components/maps/SurveyMapLegend.tsx
@@ -3,13 +3,13 @@ import "maplibre-gl/dist/maplibre-gl.css"
 import { Fragment } from "react"
 import { TLegendItem, TMapProps } from "../types"
 
-type SurveyMapLegendProps = { legend: TMapProps["legend"] }
+type Props = { legend: TMapProps["legend"] }
 
-const LegendItemShape: React.FC<{ legendItem: TLegendItem }> = ({ legendItem }) => {
+const LegendItemShape = ({ legendItem }: { legendItem: TLegendItem }) => {
   return <span className={clsx("w-5", legendItem.color, legendItem.className)} />
 }
 
-export const SurveyMapLegend: React.FC<SurveyMapLegendProps> = ({ legend }) => {
+export const SurveyMapLegend = ({ legend }: Props) => {
   return (
     <div className="!-mt-0 flex flex-col gap-3 bg-gray-200 p-4">
       {Object.entries(legend!).map(([key, value]) => (
diff --git a/src/survey-public/components/maps/SurveyMapLine.tsx b/src/survey-public/components/maps/SurveyMapLine.tsx
index 35b52c0b..2fda8462 100644
--- a/src/survey-public/components/maps/SurveyMapLine.tsx
+++ b/src/survey-public/components/maps/SurveyMapLine.tsx
@@ -1,6 +1,5 @@
 import { LayerType } from "@/src/core/components/Map/BackgroundSwitcher"
 import { SurveyBackgroundSwitcher } from "@/src/survey-public/components/maps/SurveyBackgroundSwitcher"
-import { getCompletedQuestionIds } from "@/src/survey-public/utils/getCompletedQuestionIds"
 import {
   getFeedbackDefinitionBySurveySlug,
   getResponseConfigBySurveySlug,
@@ -18,6 +17,7 @@ import Map, {
   Source,
   useMap,
 } from "react-map-gl/maplibre"
+import { getFormfieldName } from "../../utils/getFormfieldNames"
 import { DebugMapTileBoundaries } from "./DebugMapTileBoundaries"
 import { SurveyMapLineBanner } from "./SurveyMapLineBanner"
 
@@ -30,14 +30,9 @@ export type SurveyMapProps = {
       bounds: [number, number, number, number]
     }
   }
-  setIsCompleted: (value: boolean) => void
 }
 
-export const SurveyMapLine: React.FC<SurveyMapProps> = ({
-  projectMap,
-  className,
-  setIsCompleted,
-}) => {
+export const SurveyMapLine = ({ projectMap, className }: SurveyMapProps) => {
   const { mainMap } = useMap()
   const [isMediumScreen, setIsMediumScreen] = useState(false)
   const [selectedLayer, setSelectedLayer] = useState<LayerType>("vector")
@@ -56,9 +51,11 @@ export const SurveyMapLine: React.FC<SurveyMapProps> = ({
   const lineFromToNameQuestionId = evaluationRefs["line-from-to-name"]
 
   // take line geometry from form context - if it is not defined use initialMarker fallback from feedback.ts configuration
+  // todo validation getFormfieldName helper
   const selectedLine = getValues()[`custom-${geometryQuestionId}`] || null
 
   //  update the map when we have a new value for the line
+  // todo validation getFormfieldName helper
   const watchLine = watch(`custom-${geometryQuestionId}`)
 
   const maptilerApiKey = "ECOoUBmpqklzSCASXxcu"
@@ -96,18 +93,19 @@ export const SurveyMapLine: React.FC<SurveyMapProps> = ({
 
     // set values for line id, geometry and from-to-name in form context
     setValue(
-      `custom-${lineFromToNameQuestionId}`,
+      getFormfieldName("custom", lineFromToNameQuestionId!),
       `${lineFrom || "unbekannt"} - ${lineTo || "unbekannt"}`,
     )
-    setValue(`custom-${lineQuestionId}`, lineId || "unbekannt")
-    // @ts-expect-error we know that the geometry is a line string
-    setValue(`custom-${geometryQuestionId}`, JSON.stringify(lineGeometry.coordinates))
-
-    const values = getValues()
-    const completedQuestionIds = getCompletedQuestionIds(values)
-
-    // check if all questions from page one have been answered; compare arrays
-    setIsCompleted(firstPageQuestionIds!.every((val) => completedQuestionIds.includes(val)))
+    setValue(getFormfieldName("custom", lineQuestionId!), lineId || "unbekannt")
+    setValue(
+      getFormfieldName("custom", geometryQuestionId!),
+      // @ts-expect-error we know that the geometry is a line string
+      JSON.stringify(lineGeometry.coordinates),
+      {
+        shouldValidate: true,
+        shouldDirty: true,
+      },
+    )
   }
 
   const handleMouseMove = ({ features }: MapLayerMouseEvent) => {
@@ -129,7 +127,11 @@ export const SurveyMapLine: React.FC<SurveyMapProps> = ({
   const [cursorStyle, setCursorStyle] = useState("grab")
 
   return (
-    <div className={clsx("h-[500px]", className)}>
+    <div
+      className={clsx("h-[500px]", className)}
+      // todo validation getFormfieldName helper
+      aria-describedby={`custom-${geometryQuestionId}Hint`}
+    >
       <Map
         id="mainMap"
         scrollZoom={false}
diff --git a/src/survey-public/components/maps/SurveyMapLineBanner.tsx b/src/survey-public/components/maps/SurveyMapLineBanner.tsx
index d7a326b4..5b7f5214 100644
--- a/src/survey-public/components/maps/SurveyMapLineBanner.tsx
+++ b/src/survey-public/components/maps/SurveyMapLineBanner.tsx
@@ -7,7 +7,7 @@ type Props = {
 
 // todo survey clean up or refactor after survey BB - whole component
 
-export const SurveyMapLineBanner: React.FC<Props> = ({ className, lineFromToName }) => {
+export const SurveyMapLineBanner = ({ className, lineFromToName }: Props) => {
   if (lineFromToName)
     return (
       <div
diff --git a/src/survey-public/components/types.ts b/src/survey-public/components/types.ts
index 6800176e..ca02fd05 100644
--- a/src/survey-public/components/types.ts
+++ b/src/survey-public/components/types.ts
@@ -24,7 +24,7 @@ export type TQuestion = {
   component: "singleResponse" | "multipleResponse" | "textfield" | "readOnly" | "text"
   label: TTranslatableText
   help?: TTranslatableText
-  props: TSingleOrMultiResponseProps | TTextProps | TReadOnlyProps
+  props: TSingleOrMultiResponseProps | TReadOnlyProps | TTextfieldProps | TTextareaProps
 }
 
 export type TButtonWithAction = {
@@ -48,6 +48,16 @@ type TTranslatableText = {
 
 export type TSingleOrMultiResponseProps = {
   responses: TResponse[]
+  validation?: {
+    // atm all multiResponse questions are optional, this has to be changed in the future:
+    // https://github.com/FixMyBerlin/private-issues/issues/1710
+    // all singleResponse questions are required by default, this can be changed by setting optional to true
+    optional?: boolean
+    // todo validation for multiResponse: min/max number of responses
+    // maxResponses?: number
+    // minResponses?: number
+    // customMessage?: string
+  }
 }
 
 export type TResponse = {
@@ -89,14 +99,34 @@ export type TLegendItem = {
   className?: string
 }
 
-export type TTextProps = {
+export type TTextfieldProps = {
+  placeholder?: TTranslatableText
+  caption?: TTranslatableText
+  validation?: {
+    type: "email" | "text" // default is text
+    optional?: boolean // default is false - so if not set it is required
+    maxLength?: number // default is 1000 for text and 5000 for textarea
+    minLength?: number // default is 1 if optional not set to false // if minLength is set then optional id overwritten
+    // customMessage?: string
+    regex?: RegExp // default is undefined
+  }
+}
+export type TTextareaProps = {
   placeholder?: TTranslatableText
   caption?: TTranslatableText
-  maxLength?: number
+  validation?: {
+    optional?: boolean // default is false - so if not set it is required
+    maxLength?: number // default is 1000 for text and 5000 for textarea
+    minLength?: number // default is 1 if optional not set to true // if minLength is set then optional id overwritten
+    // customMessage?: string
+    regex?: RegExp // default is undefined
+  }
 }
 
 export type TReadOnlyProps = {
   queryId: string
+  placeholder?: TTranslatableText
+  caption?: TTranslatableText
 }
 
 export type TFeedbackQuestion = {
@@ -104,7 +134,7 @@ export type TFeedbackQuestion = {
   id: number
   label: TTranslatableText
   component: "singleResponse" | "multipleResponse" | "text" | "map" | "custom"
-  props?: TSingleOrMultiResponseProps | TMapProps | TTextProps
+  props?: TSingleOrMultiResponseProps | TMapProps | TTextfieldProps | TTextareaProps
 }
 
 export type TFeedback = {
diff --git a/src/survey-public/radnetz-brandenburg/data/feedback.ts b/src/survey-public/radnetz-brandenburg/data/feedback.ts
index c205fb14..b5c203fc 100644
--- a/src/survey-public/radnetz-brandenburg/data/feedback.ts
+++ b/src/survey-public/radnetz-brandenburg/data/feedback.ts
@@ -243,7 +243,7 @@ export const feedbackDefinition: TFeedback = {
           props: {
             placeholder: { de: "Beantworten Sie hier..." },
             caption: { de: "max. 5000 Zeichen" },
-            maxLength: 5000,
+            validation: { maxLength: 5000 },
           },
         },
       ],
diff --git a/src/survey-public/radnetz-brandenburg/data/survey.ts b/src/survey-public/radnetz-brandenburg/data/survey.ts
index e496626e..bc142622 100644
--- a/src/survey-public/radnetz-brandenburg/data/survey.ts
+++ b/src/survey-public/radnetz-brandenburg/data/survey.ts
@@ -42,7 +42,9 @@ export const surveyDefinition: TSurvey = {
           id: 3,
           label: { de: "E-Mail-Adresse" },
           component: "textfield",
-          props: {},
+          props: {
+            validation: { type: "email" },
+          },
         },
         {
           id: 4,
@@ -51,7 +53,9 @@ export const surveyDefinition: TSurvey = {
             de: "Tragen Sie hier die 4-stellige PIN ein, die Sie von uns per E-Mail erhalten haben.",
           },
           component: "textfield",
-          props: {},
+          props: {
+            validation: { maxLength: 4, minLength: 4 },
+          },
         },
         {
           id: 5,
@@ -121,7 +125,7 @@ export const surveyDefinition: TSurvey = {
           component: "text",
           props: {
             caption: { de: "max. 5000 Zeichen" },
-            maxLength: 5000,
+            validation: { maxLength: 5000 },
           },
         },
       ],
diff --git a/src/survey-public/utils/createSurveySchema.ts b/src/survey-public/utils/createSurveySchema.ts
new file mode 100644
index 00000000..2d6d37b3
--- /dev/null
+++ b/src/survey-public/utils/createSurveySchema.ts
@@ -0,0 +1,219 @@
+import { z } from "zod"
+import { TFeedbackQuestion, TQuestion, TSingleOrMultiResponseProps } from "../components/types"
+import { getFormfieldName } from "./getFormfieldNames"
+
+const defaultZodSchema = {
+  text: z
+    .string()
+    .trim()
+    // empty string is not allowed
+    .min(1, { message: "Pflichtfeld." })
+    .max(1000, { message: "Maximal 1000 Zeichen." }),
+  textarea: z
+    .string()
+    .trim()
+    .min(1, { message: "Pflichtfeld." })
+    .max(5000, { message: "Maximal 5000 Zeichen." }),
+  single: z.string({ message: "Pflichtfeld." }).trim().min(1, { message: "Pflichtfeld." }),
+  multi: z.array(z.string()).nonempty({
+    message: "Pflichtfeld.",
+  }),
+}
+
+/**
+ * @desc The function creates a Zod schema based on provided questions to validate inputs in a public survey form.
+ * Generates several different Zod schemas for a single form to validate inputs of every screen/"page".
+ *
+ * Dynamic Construction:
+ * Constructs a Zod schema based on the provided questions and their component type and validation properties,
+ * which are configured in the respective configuration files of the surveys in `src/survey-public/{surveySlug}`
+ * (at the moment these files are named survey.ts and feedback.ts).
+ * The object keys of the schema are constructed based on the component type and the question id by the helper function getFormfieldName.
+ *
+ * Component Types:
+ * The function supports questions with component types: "singleResponse" | "multipleResponse" | "textfield" | "readOnly" | "text" | "custom" | "map".
+ * The function iterates over each question to build the schema based on the component type and validation properties.
+ * If no validation properties are provided, the function uses default validation properties. (see defaultZodSchema)
+ * Different component types allow different validation properties: see `src/survey-public/components/types.ts`
+ *
+ * Optional Fields:
+ * Fields are required by default unless the `optional` property of the validation object is set to true.
+ * Exception is the multipleResponse field, that can only be optional at the moment. This is a limitation of the current implementation.
+ * see https://github.com/FixMyBerlin/private-issues/issues/1710
+ *
+ * @param {TQuestion[] | TFeedbackQuestion[]} questions - Array of questions to generate the schema from.
+ * @returns {z.ZodObject} - The constructed schema object as a Zod object.
+ */
+
+export const createSurveySchema = (questions?: TQuestion[] | TFeedbackQuestion[]) => {
+  if (!questions?.length) return z.object({})
+  const schemaObject: Record<string, any> = {}
+  // const multipleResponseKeys: string[] = []
+
+  questions.forEach((q) => {
+    const { id, props, component } = q
+    // @ts-expect-error
+    const validation = props?.validation || undefined
+    const formfieldName = getFormfieldName(component, id)
+
+    switch (component) {
+      case "textfield": // input type text
+        if (validation) {
+          switch (validation.type) {
+            case "email":
+              let customEmailZodSchema = z.string().email({
+                message: "Ungültige E-Mail-Adresse",
+              })
+              if (validation?.optional) {
+                // @ts-expect-error this works // to do validtion ?
+                customEmailZodSchema = customEmailZodSchema.nullish().or(z.literal(""))
+              }
+              schemaObject[formfieldName] = customEmailZodSchema
+              break
+            case "text":
+            default:
+              let customTextZodSchema = z
+                .string()
+                .trim()
+                .max(validation.maxLength || 1000, {
+                  message: `Maximal ${validation.maxLength || 1000} Zeichen.`,
+                })
+              if (validation.minLength) {
+                customTextZodSchema = customTextZodSchema.min(validation.minLength, {
+                  message: `Mindestens ${validation.minLength} Zeichen.`,
+                })
+              }
+              if (!validation.minLength && !validation?.optional) {
+                customTextZodSchema = customTextZodSchema.min(1, {
+                  message: `Pflichtfeld.`,
+                })
+              }
+              if (validation.regex) {
+                customTextZodSchema = customTextZodSchema.regex(validation.regex, {
+                  message: "Ungültige Eingabe.",
+                })
+              }
+              schemaObject[formfieldName] = customTextZodSchema
+              break
+          }
+        } else {
+          schemaObject[formfieldName] = defaultZodSchema.text
+        }
+        break
+      case "readOnly": // input type text but read only
+        schemaObject[formfieldName] = validation?.optional
+          ? defaultZodSchema.text.nullish().or(z.literal(""))
+          : defaultZodSchema.text
+        break
+      case "text": // input type textarea
+        if (validation) {
+          let customTextareaZodSchmema = z
+            .string()
+            .trim()
+            .max(validation.maxLength || 10000, {
+              message: `Die maximale Zeichenanzahl von ${validation.maxLength || 10000} Zeichen ist überschritten. Bitte kürzen Sie Ihren Text entsprechend, um fortzufahren.`,
+            })
+          if (validation.minLength) {
+            customTextareaZodSchmema = customTextareaZodSchmema.min(validation.minLength, {
+              message: `Mindestens ${validation.minLength} Zeichen.`,
+            })
+          }
+          if (!validation.minLength && !validation?.optional) {
+            customTextareaZodSchmema = customTextareaZodSchmema.min(1, {
+              message: `Pflichtfeld.`,
+            })
+          }
+          if (validation?.optional) {
+            // @ts-expect-error this works // to do validtion ?
+            customTextareaZodSchmema = customTextareaZodSchmema.nullish().or(z.literal(""))
+          }
+          schemaObject[formfieldName] = customTextareaZodSchmema
+        } else {
+          schemaObject[formfieldName] = defaultZodSchema.textarea
+        }
+        break
+      case "singleResponse":
+        schemaObject[formfieldName] = validation?.optional
+          ? z.string({ message: "Pflichtfeld." }).trim().nullish().or(z.literal(""))
+          : defaultZodSchema.single
+        break
+      case "multipleResponse":
+        const multiResponseProps = props as TSingleOrMultiResponseProps
+        multiResponseProps.responses.forEach((r) => {
+          const key = `${formfieldName}-${r.id}`
+          schemaObject[key] = z.boolean()
+          // Add key to multipleResponseKeys if not optional
+          // if it is optional we do not need to validate if one of the options is selected
+          // if (!validation?.optional) multipleResponseKeys.push(key)
+        })
+
+        break
+      case "custom":
+        schemaObject[formfieldName] = z.union([
+          z.string({ required_error: "Pflichtfeld." }).trim().min(1, { message: "Pflichtfeld." }),
+          z.number({ required_error: "Pflichtfeld." }),
+          z.boolean({ required_error: "Pflichtfeld." }),
+          z.object({}, { required_error: "Pflichtfeld." }).passthrough(),
+          z.array(z.any({ required_error: "Pflichtfeld." })),
+        ])
+        break
+      case "map":
+        schemaObject[formfieldName] = z.object(
+          {
+            lng: z.number(),
+            lat: z.number(),
+          },
+          { required_error: "Pflichtfeld." },
+        )
+        break
+    }
+  })
+  return z.object(schemaObject)
+
+  // todo validation: multipleResponse validation
+  // see https://github.com/FixMyBerlin/private-issues/issues/1710
+  // if (!multipleResponseKeys?.length)
+
+  // // Add custom validation for multipleResponse fields
+  // const refinedSchema = z
+  //   .object(schemaObject)
+  //   // partial is used to allow for partial validation ; without partial refine() would require all fields to be present before refine function is called
+  //   .partial()
+  //   // @ts-expect-error type todo
+  //   .refine(
+  //     (data) => {
+  //       const multipleResponseGroups = {}
+
+  //       // Group multipleResponse keys by their question id
+  //       multipleResponseKeys.forEach((key) => {
+  //         const [prefix, id] = key.split("-").slice(0, 2)
+  //         const groupKey = `${prefix}-${id}`
+  //         // @ts-expect-error index type
+  //         if (!multipleResponseGroups[groupKey]) {
+  //           // @ts-expect-error index type
+  //           multipleResponseGroups[groupKey] = []
+  //         }
+  //         // @ts-expect-error index type
+  //         multipleResponseGroups[groupKey].push(key)
+  //       })
+
+  //       // Check that at least one value in each group is true if not optional
+  //       // not really what we want
+  //       const isValid = Object.entries(multipleResponseGroups).every(([groupKey, keys]) => {
+  //         // @ts-expect-error type todo
+  //         return keys.some((key) => data[key] === true)
+  //       })
+
+  //       console.log("Validation result:", isValid)
+  //       return isValid
+  //     },
+  //     {
+  //       message: "Bitte wählen Sie mindestens eine Antwort aus.",
+  //       // todo validation: the error returned is a nested object, to access the message we just take the first key
+  //       // but this is a hacky solution; after the refactor this might be handled differently
+  //       path: [multipleResponseKeys[0]],
+  //     },
+  //   )
+
+  // return refinedSchema
+}
diff --git a/src/survey-public/utils/getFormfieldNames.ts b/src/survey-public/utils/getFormfieldNames.ts
new file mode 100644
index 00000000..16147286
--- /dev/null
+++ b/src/survey-public/utils/getFormfieldNames.ts
@@ -0,0 +1,62 @@
+import { TFeedbackQuestion, TQuestion } from "../components/types"
+
+const componentNamePrefixMap: Record<
+  TQuestion["component"] | TFeedbackQuestion["component"],
+  string
+> = {
+  multipleResponse: "multi",
+  singleResponse: "single",
+  text: "text", // textarea
+  textfield: "text", // text input
+  readOnly: "text",
+  map: "map",
+  custom: "custom",
+}
+
+/**
+ * @desc Helper function to generate names of form fields of the public survey.
+ *
+ * The function constructs form field names based on the component type and question ID (both defined in the config files of the survey).
+ * It uses a predefined mapping of component types to name prefixes.
+ * The generated form field names are used to define and access the form values in the public survey.
+ * The prefixes are used to distinguish between different types of form fields when transforming the values before submitting them to the backend.
+ *
+ * @param {TQuestion["component"] | TFeedbackQuestion["component"]} componentType - The type of the component.
+ * @param {number} id - The ID of the question.
+ * @returns {string} - The generated form field name.
+ */
+
+export const getFormfieldName = (
+  componentType: TQuestion["component"] | TFeedbackQuestion["component"],
+  id: number,
+) => {
+  const prefix = componentNamePrefixMap[componentType]
+  return `${prefix}-${id}`
+}
+
+/**
+ * @desc Helper function to generate form field names for an array of questions.
+ * These names are used to identify form values and perform validation for a specific group of form fields.
+ *
+ * The function iterates over the provided questions and constructs form field names using the getFormfieldName function.
+ * For "multipleResponse" components, it adds one field name per respone, including the response ID in the name.
+ *
+ * @param {TFeedbackQuestion[] | TQuestion[]} questions - Array of questions to generate form field names from.
+ * @returns {string[]} - Array of form field names.
+ */
+
+export const getFormfieldNamesByQuestions = (questions: TFeedbackQuestion[] | TQuestion[]) => {
+  const formFieldNames: string[] = []
+
+  questions.forEach((q) => {
+    if (q.component === "multipleResponse") {
+      // @ts-expect-error
+      q.props?.responses?.forEach((r) => {
+        formFieldNames.push(`${componentNamePrefixMap[q.component]}-${q.id}-${r.id}`)
+      })
+    } else {
+      formFieldNames.push(getFormfieldName(q.component, q.id))
+    }
+  })
+  return formFieldNames
+}
diff --git a/src/survey-responses/components/feedback/EditableSurveyResponseFilterForm.tsx b/src/survey-responses/components/feedback/EditableSurveyResponseFilterForm.tsx
index 95a8c77d..dcbecd82 100644
--- a/src/survey-responses/components/feedback/EditableSurveyResponseFilterForm.tsx
+++ b/src/survey-responses/components/feedback/EditableSurveyResponseFilterForm.tsx
@@ -17,7 +17,7 @@ import { useQuery } from "@blitzjs/rpc"
 import { MagnifyingGlassCircleIcon } from "@heroicons/react/20/solid"
 import { XMarkIcon } from "@heroicons/react/24/outline"
 import { Operator } from "@prisma/client"
-import clsx from "clsx"
+import { clsx } from "clsx"
 import { PropsWithoutRef, useEffect, useState } from "react"
 import { z } from "zod"
 import getFeedbackSurveyResponsesWithSurveyDataAndComments from "../../queries/getFeedbackSurveyResponsesWithSurveyDataAndComments"
diff --git a/src/survey-responses/components/feedback/EditableSurveyResponseMapAndStaticData.tsx b/src/survey-responses/components/feedback/EditableSurveyResponseMapAndStaticData.tsx
index 17407ac5..f41fb14c 100644
--- a/src/survey-responses/components/feedback/EditableSurveyResponseMapAndStaticData.tsx
+++ b/src/survey-responses/components/feedback/EditableSurveyResponseMapAndStaticData.tsx
@@ -13,7 +13,7 @@ import getSurvey from "@/src/surveys/queries/getSurvey"
 import { Routes, useParam } from "@blitzjs/next"
 import { useMutation, useQuery } from "@blitzjs/rpc"
 import { EnvelopeIcon } from "@heroicons/react/20/solid"
-import clsx from "clsx"
+import { clsx } from "clsx"
 
 import { LngLatBoundsLike } from "react-map-gl/dist/esm/exports-maplibre"
 import deleteSurveyResponse from "../../mutations/deleteSurveyResponse"
diff --git a/src/survey-responses/components/feedback/ExternalSurveyResponseForm.tsx b/src/survey-responses/components/feedback/ExternalSurveyResponseForm.tsx
index 080a9523..f9ca948b 100644
--- a/src/survey-responses/components/feedback/ExternalSurveyResponseForm.tsx
+++ b/src/survey-responses/components/feedback/ExternalSurveyResponseForm.tsx
@@ -42,6 +42,7 @@ export const ExternalSurveyResponseForm: React.FC<Props> = ({
 
   const ExternalSurveyResponseFormSchema = z.object({
     source: z.nativeEnum(SurveyResponseSourceEnum),
+    // todo helper function getFormfieldName()
     [`single-${isLocationId}`]: z.string(),
     [`single-${categoryId}`]: z.string(),
     [`text-${userText1Id}`]: z.string().nonempty({ message: "Pflichtfeld." }),
diff --git a/src/survey-responses/components/feedback/ExternalSurveyResponseFormMap.tsx b/src/survey-responses/components/feedback/ExternalSurveyResponseFormMap.tsx
index 5503c647..64ad37ad 100644
--- a/src/survey-responses/components/feedback/ExternalSurveyResponseFormMap.tsx
+++ b/src/survey-responses/components/feedback/ExternalSurveyResponseFormMap.tsx
@@ -18,6 +18,7 @@ export const ExternalSurveyResponseFormMap: React.FC<Props> = ({
   const { watch } = useFormContext()
 
   // watch if user choses to set a pin, update component if user choses to set a pin
+  // todo helper function getFormfieldName()
   const isMap = watch(`single-${isUserLocationQuestionId}`) === "true"
 
   return (
diff --git a/src/survey-responses/components/feedback/comments/EditSurveyResponseCommentForm.tsx b/src/survey-responses/components/feedback/comments/EditSurveyResponseCommentForm.tsx
index b086bae3..0c0e6944 100644
--- a/src/survey-responses/components/feedback/comments/EditSurveyResponseCommentForm.tsx
+++ b/src/survey-responses/components/feedback/comments/EditSurveyResponseCommentForm.tsx
@@ -11,7 +11,7 @@ import updateSurveyResponseComment from "@/src/survey-response-comments/mutation
 import getFeedbackSurveyResponsesWithSurveyDataAndComments from "@/src/survey-responses/queries/getFeedbackSurveyResponsesWithSurveyDataAndComments"
 import { useSession } from "@blitzjs/auth"
 import { PencilIcon, TrashIcon } from "@heroicons/react/24/outline"
-import clsx from "clsx"
+import { clsx } from "clsx"
 import deleteSurveyResponseComment from "../../../../survey-response-comments/mutations/deleteSurveyResponseComment"
 import { EditableSurveyResponseListItemProps } from "../EditableSurveyResponseListItem"
 
diff --git a/src/survey-responses/components/feedback/comments/NewSurveyResponseCommentForm.tsx b/src/survey-responses/components/feedback/comments/NewSurveyResponseCommentForm.tsx
index 6d642f49..fbbcdbbf 100644
--- a/src/survey-responses/components/feedback/comments/NewSurveyResponseCommentForm.tsx
+++ b/src/survey-responses/components/feedback/comments/NewSurveyResponseCommentForm.tsx
@@ -3,7 +3,7 @@ import { useTryProjectSlug } from "@/src/core/routes/usePagesDirectoryProjectSlu
 import createSurveyResponseComment from "@/src/survey-response-comments/mutations/createSurveyResponseComment"
 import getFeedbackSurveyResponsesWithSurveyDataAndComments from "@/src/survey-responses/queries/getFeedbackSurveyResponsesWithSurveyDataAndComments"
 import { invalidateQuery, useMutation } from "@blitzjs/rpc"
-import clsx from "clsx"
+import { clsx } from "clsx"
 import dompurify from "dompurify"
 import { useState } from "react"
 import { LabeledTextarea } from "../form/LabeledTextarea"
diff --git a/src/survey-responses/components/feedback/comments/SurveyResponseCommentField.tsx b/src/survey-responses/components/feedback/comments/SurveyResponseCommentField.tsx
index a3d6ba0b..4624556d 100644
--- a/src/survey-responses/components/feedback/comments/SurveyResponseCommentField.tsx
+++ b/src/survey-responses/components/feedback/comments/SurveyResponseCommentField.tsx
@@ -3,7 +3,7 @@ import dompurify from "dompurify"
 import { Markdown } from "@/src/core/components/Markdown/Markdown"
 import { proseClasses } from "@/src/core/components/text"
 import { IfUserCanEdit } from "@/src/pagesComponents/memberships/IfUserCan"
-import clsx from "clsx"
+import { clsx } from "clsx"
 import { EditableSurveyResponseListItemProps } from "../EditableSurveyResponseListItem"
 import { EditSurveyResponseCommentForm } from "./EditSurveyResponseCommentForm"
 import { localDateTime } from "./utils/localDateTime"
diff --git a/src/survey-responses/components/feedback/form/LabeledInputRadioCheckbox.tsx b/src/survey-responses/components/feedback/form/LabeledInputRadioCheckbox.tsx
index 4986b67b..a52d1211 100644
--- a/src/survey-responses/components/feedback/form/LabeledInputRadioCheckbox.tsx
+++ b/src/survey-responses/components/feedback/form/LabeledInputRadioCheckbox.tsx
@@ -1,4 +1,4 @@
-import clsx from "clsx"
+import { clsx } from "clsx"
 import { CSSProperties, PropsWithoutRef } from "react"
 interface LabeledInputRadioCheckboxProps extends PropsWithoutRef<JSX.IntrinsicElements["input"]> {
   classNameLabelOverwrite?: string
diff --git a/src/survey-responses/components/feedback/form/LabeledTextarea.tsx b/src/survey-responses/components/feedback/form/LabeledTextarea.tsx
index 68eda5d2..380eb2d8 100644
--- a/src/survey-responses/components/feedback/form/LabeledTextarea.tsx
+++ b/src/survey-responses/components/feedback/form/LabeledTextarea.tsx
@@ -1,4 +1,4 @@
-import clsx from "clsx"
+import { clsx } from "clsx"
 import { PropsWithoutRef } from "react"
 
 interface LabeledTextareaProps extends PropsWithoutRef<JSX.IntrinsicElements["textarea"]> {