diff --git a/apps/frontend/src/components/common/MultistepWizard.tsx b/apps/frontend/src/components/common/MultistepWizard.tsx index 3c52f89c37..29dd4f4393 100644 --- a/apps/frontend/src/components/common/MultistepWizard.tsx +++ b/apps/frontend/src/components/common/MultistepWizard.tsx @@ -51,9 +51,17 @@ export const Wizard = ({ setStepNumber(Math.max(stepNumber - 1, 0)); }; - const handleStep = (step: number, values: FormikValues) => () => { + const handleStep = (stepIndex: number, values: FormikValues) => () => { + const form = document.querySelector('form'); + + if (form && !form.checkValidity()) { + form.reportValidity(); + + return; + } + setSnapshot(values); - setStepNumber(step); + setStepNumber(stepIndex); }; const handleSubmit = async ( @@ -134,7 +142,11 @@ export const Wizard = ({ disabled={formik.isSubmitting} > {formik.isSubmitting && } - {isLastStep ? (shouldCreate ? 'Create' : 'Update') : 'Next'} + {isLastStep + ? shouldCreate + ? 'Create' + : 'Update' + : 'Save and Continue'}