diff --git a/src/components/client/support-form/SupportForm.tsx b/src/components/client/support-form/SupportForm.tsx
index d622a3ffa..ca5ec2fbb 100644
--- a/src/components/client/support-form/SupportForm.tsx
+++ b/src/components/client/support-form/SupportForm.tsx
@@ -3,13 +3,11 @@ import { useMutation } from '@tanstack/react-query'
 import { useTranslation } from 'next-i18next'
 import React, { useState, useRef } from 'react'
 import { FormikHelpers, FormikProps } from 'formik'
-import { Stepper, Step, StepLabel, StepConnector, Hidden, Grid, Box } from '@mui/material'
-
+import { Stepper, Step, StepLabel, StepConnector, Grid, Box } from '@mui/material'
 import { AlertStore } from 'stores/AlertStore'
 import { createSupportRequest } from 'service/support'
 import GenericForm from 'components/common/form/GenericForm'
 import { ApiErrors, isAxiosError, matchValidator } from 'service/apiErrors'
-
 import Actions from './Actions'
 import Roles from './steps/Roles'
 import StepIcon from './StepperIcon'
@@ -24,6 +22,7 @@ import {
   SupportRequestResponse,
   SupportRequestInput,
 } from './helpers/support-form.types'
+import ValidationObserver from './ValidationObserver'
 
 const initialValues: SupportFormData = {
   person: {
@@ -108,6 +107,7 @@ export default function SupportForm() {
   const formRef = useRef<FormikProps<SupportFormData>>(null)
   const [activeStep, setActiveStep] = useState<Steps>(Steps.ROLES)
   const [failedStep, setFailedStep] = useState<Steps>(Steps.NONE)
+  const [currentValidatedField, setCurrentValidatedField] = useState<number | null>(null)
 
   const mutation = useMutation<
     AxiosResponse<SupportRequestResponse>,
@@ -222,21 +222,22 @@ export default function SupportForm() {
       onSubmit={handleSubmit}
       initialValues={initialValues}
       validationSchema={validationSchema[activeStep]}
-      innerRef={formRef}>
-      <Hidden mdDown>
-        <Stepper
-          alternativeLabel
-          activeStep={activeStep}
-          connector={<StepConnector sx={{ mt: 1.5 }} />}>
-          {steps.map((step, index) => (
-            <Step key={index}>
-              <StepLabel error={isStepFailed(index)} StepIconComponent={StepIcon}>
-                {t(step.label)}
-              </StepLabel>
-            </Step>
-          ))}
-        </Stepper>
-      </Hidden>
+      innerRef={formRef}
+      validateOnBlur={false}
+      validateOnChange={currentValidatedField === activeStep}>
+      <Stepper
+        alternativeLabel
+        activeStep={activeStep}
+        connector={<StepConnector sx={{ mt: 1.5 }} />}
+        sx={{ display: { xs: 'none', md: 'flex' } }}>
+        {steps.map((step, index) => (
+          <Step key={index}>
+            <StepLabel error={isStepFailed(index)} StepIconComponent={StepIcon}>
+              {t(step.label)}
+            </StepLabel>
+          </Step>
+        ))}
+      </Stepper>
       {isThankYouStep(activeStep, steps) ? (
         steps[activeStep].component
       ) : (
@@ -258,6 +259,10 @@ export default function SupportForm() {
           </Grid>
         </Box>
       )}
+      <ValidationObserver
+        setCurrentValidatedField={setCurrentValidatedField}
+        activeStep={activeStep}
+      />
     </GenericForm>
   )
 }
diff --git a/src/components/client/support-form/ValidationObserver.tsx b/src/components/client/support-form/ValidationObserver.tsx
new file mode 100644
index 000000000..e1ca0394b
--- /dev/null
+++ b/src/components/client/support-form/ValidationObserver.tsx
@@ -0,0 +1,39 @@
+import { useFormikContext } from 'formik'
+import { useEffect, useRef } from 'react'
+import { Steps } from './helpers/support-form.types'
+
+const STEPS_VALIDATION_MAP = {
+  [Steps.ROLES]: ['roles'],
+  [Steps.QUESTIONS]: ['benefactor', 'partner', 'volunteer', 'associationMember', 'company'],
+  [Steps.PERSON]: ['person'],
+}
+
+const ValidationObserver = ({
+  setCurrentValidatedField,
+  activeStep,
+}: {
+  setCurrentValidatedField: React.Dispatch<React.SetStateAction<number | null>>
+  activeStep: number
+}) => {
+  const activeStepRef = useRef(0)
+  const { errors, submitCount } = useFormikContext()
+
+  useEffect(() => {
+    if (activeStepRef.current !== activeStep) {
+      activeStepRef.current = activeStep
+      setCurrentValidatedField(null)
+    }
+
+    const value = Object.entries(STEPS_VALIDATION_MAP).find(([, value]) => {
+      return value.includes(Object.keys(errors)?.[0])
+    })
+
+    if (submitCount > 0 && value) {
+      setCurrentValidatedField(Number(value?.[0]))
+    }
+  }, [errors, submitCount, activeStep])
+
+  return null
+}
+
+export default ValidationObserver