Add validate data befrore next step

episerver · Dec 20, 2023 · f5eb393 · f5eb393
1 parent ed1b0fb
commit f5eb393
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 11 deletions.
diff --git a/src/@episerver/forms-react/src/components/FormBody.tsx b/src/@episerver/forms-react/src/components/FormBody.tsx
@@ -68,11 +68,11 @@ export const FormBody = (props: FormBodyProps) => {
         message.current = error;
     }
 
-    const handleSubmit = (e: any) => {
+    const handleSubmit = async (e: any):Promise<boolean> => {
         e.preventDefault();
 
         if (!form.properties.allowAnonymousSubmission && isNullOrEmpty(formContext?.identityInfo?.accessToken)) {
-            return;
+            return false;
         }
 
         //Find submit button, if found then check property 'finalizeForm' of submit button. Otherwise, button Next/Previous was clicked.
@@ -94,7 +94,7 @@ export const FormBody = (props: FormBodyProps) => {
         let invalid = stepHelper.getFirstInvalidElement(formValidationResults, currentStepIndex);
         if(!isNullOrEmpty(invalid)){
             dispatchFunctions.updateFocusOn(invalid);
-            return;
+            return false;
         }
 
         let isLastStep = currentStepIndex === form.steps.length - 1;
@@ -157,6 +157,8 @@ export const FormBody = (props: FormBodyProps) => {
         }).finally(()=>{
             dispatchFunctions.updateIsSubmitting(false);
         });
+
+        return true;
     }
 
     useEffect(() => {

diff --git a/src/@episerver/forms-react/src/components/FormStepNavigation.tsx b/src/@episerver/forms-react/src/components/FormStepNavigation.tsx
@@ -1,24 +1,21 @@
 import React, { useRef } from "react";
 import { useForms } from "../context/store";
-import { FormCache, FormContainer, FormStep, StepDependCondition, SubmitButtonType, isNull } from "@episerver/forms-sdk";
-import { DispatchFunctions } from "../context/dispatchFunctions";
+import { FormContainer, FormStep, StepDependCondition, SubmitButtonType, isNull } from "@episerver/forms-sdk";
 
 interface FormStepNavigationProps {
     isFormFinalized: boolean;
     history?: any;
-    handleSubmit: (e: any) => void;
+    handleSubmit: (e: any) => Promise<boolean>;
     isMalFormSteps: boolean;
     isStepValidToDisplay: boolean;
     currentStepIndex: number;
 }
 
 export const FormStepNavigation = (props: FormStepNavigationProps) => {
     const formContext = useForms();
-    const formCache = new FormCache();
     const form = formContext?.formContainer ?? {} as FormContainer;
     const depend = new StepDependCondition(form, formContext?.dependencyInactiveElements ?? []);
     const { isFormFinalized, history, handleSubmit, isMalFormSteps, isStepValidToDisplay, currentStepIndex } = props;
-    const dispatchFuncs = new DispatchFunctions();
     const stepLocalizations = useRef<Record<string, string>>(form.steps?.filter(s => !isNull(s.formStep.localizations))[0]?.formStep.localizations).current;
 
     const submittable = true
@@ -36,10 +33,10 @@ export const FormStepNavigation = (props: FormStepNavigationProps) => {
         goToStep(depend.findPreviousStep(currentStepIndex) ?? 0)
     }
 
-    const handleNextStep = (event: React.MouseEvent<HTMLButtonElement>) => {
+    const handleNextStep = async (event: React.MouseEvent<HTMLButtonElement>) => {
         event.preventDefault()
-        handleSubmit(event)
-        goToStep(depend.findNextStep(currentStepIndex) ?? 0)
+        let isSuccess = await handleSubmit(event);
+        isSuccess && goToStep(depend.findNextStep(currentStepIndex) ?? 0);
     }
 
     const goToStep = (stepIndex: number) => {