Prevent submit if data is invalid

Task: AFORM-3707
episerver · Nov 22, 2023 · ec8d0e0 · ec8d0e0
1 parent 29706db
commit ec8d0e0
Show file tree

Hide file tree

Showing 17 changed files with 141 additions and 50 deletions.
diff --git a/src/@optimizely/forms-react/src/components/FormBody.tsx b/src/@optimizely/forms-react/src/components/FormBody.tsx
@@ -1,17 +1,21 @@
 import React, { useRef } from "react";
-import { useForms } from "../context/store";
-import { FormContainer, FormSubmit, StepBuilder, SubmitButtonType, isInArray } from "@optimizely/forms-sdk";
+import { useForms, useFormsDispatch } from "../context/store";
+import { FormContainer, FormSubmit, SubmitButtonType, equals, isInArray, isNull, isNullOrEmpty } from "@optimizely/forms-sdk";
 import { RenderElementInStep } from "./RenderElementInStep";
+import { DispatchFunctions } from "../context/dispatchFunctions";
 
 export const FormBody = () => {
     const formContext = useForms();
     const form = formContext?.formContainer ?? {} as FormContainer;
     const formSubmit = new FormSubmit(formContext?.formContainer ?? {} as FormContainer);
+    const dispatch = useFormsDispatch();
+    const dispatchFunctions = new DispatchFunctions(dispatch);
 
     const formTitleId = `${form.key}_label`;
     const statusDisplay = useRef<string>("hide");
     const stepCount = form.steps.length;
     const statusMessage = useRef<string>("");
+    const stepLocalizations = useRef<Record<string, string>>(form.steps?.filter(s => !isNull(s.formStep.localizations))[0]?.formStep.localizations);
 
     //TODO: these variables should be get from api or sdk
     const validateFail = false,
@@ -28,14 +32,14 @@ export const FormBody = () => {
 
     if(formFinalized || isProgressiveSubmit)
     {
-    statusDisplay.current = "Form__Success__Message";
-    statusMessage.current = form.properties.submitSuccessMessage ?? message;
+        statusDisplay.current = "Form__Success__Message";
+        statusMessage.current = form.properties.submitSuccessMessage ?? message;
     }
     else if((submissionWarning || (!submittable && !isSuccess)) 
-    && message)
+        && message)
     {
-    statusDisplay.current = "Form__Warning__Message";
-    statusMessage.current = message;
+        statusDisplay.current = "Form__Warning__Message";
+        statusMessage.current = message;
     }
     const validationCssClass = validateFail ? "ValidationFail" : "ValidationSuccess";
     const isShowStepNavigation = stepCount > 1 && currentStepIndex > -1 && currentStepIndex < stepCount && !formFinalized;
@@ -50,7 +54,20 @@ export const FormBody = () => {
         let formSubmissions = (formContext?.formSubmissions ?? [])
                                 //only post value of active elements
                                 .filter(fs => !isInArray(fs.elementKey, formContext?.dependencyInactiveElements ?? []));
-
+        //validate all submission data before submit
+        let formValidationResults = formSubmit.doValidate(formSubmissions);
+        dispatchFunctions.dispatchUpdateAllValidation(formValidationResults);
+
+        //set focus on the 1st invalid element of current step
+        let invalid = formValidationResults.filter(fv => 
+                fv.results.some(r => !r.valid) &&    
+                form.steps[currentStepIndex]?.elements?.some(e => equals(e.key, fv.elementKey))
+            )[0]?.elementKey;
+        if(!isNullOrEmpty(invalid)){
+            dispatchFunctions.dispatchFocusOn(invalid);
+            return;
+        }
+
         formSubmit.doSubmit(formSubmissions);
     }
 
@@ -106,20 +123,20 @@ export const FormBody = () => {
                     <nav role="navigation" className="Form__NavigationBar">
                         <button type="submit" name="submit" value={SubmitButtonType.PreviousStep} className="Form__NavigationBar__Action FormExcludeDataRebind btnPrev"
                                 disabled={prevButtonDisableState}>
-                            {form.localizations["previousButtonLabel"]}
+                            {stepLocalizations.current["previousButtonLabel"]}
                         </button>
 
                         <div className="Form__NavigationBar__ProgressBar">
                             <div className="Form__NavigationBar__ProgressBar--Progress" style={{width: progressWidth}}></div>
                             <div className="Form__NavigationBar__ProgressBar--Text">
-                                <span className="Form__NavigationBar__ProgressBar__ProgressLabel">{form.localizations["pageButtonLabel"]}</span>
+                                <span className="Form__NavigationBar__ProgressBar__ProgressLabel">{stepLocalizations.current["pageButtonLabel"]}</span>
                                 <span className="Form__NavigationBar__ProgressBar__CurrentStep">{currentDisplayStepIndex}</span>/
                                 <span className="Form__NavigationBar__ProgressBar__StepsCount">{stepCount}</span>
                             </div>
                         </div>
                         <button type="submit" name="submit" value={SubmitButtonType.NextStep} className="Form__NavigationBar__Action FormExcludeDataRebind btnNext"
                                 disabled={nextButtonDisableState}>
-                            {form.localizations["nextButtonLabel"]}
+                            {stepLocalizations.current["nextButtonLabel"]}
                         </button>
                     </nav>
                 }

diff --git a/src/@optimizely/forms-react/src/components/elements/FileUploadElementBlock.tsx b/src/@optimizely/forms-react/src/components/elements/FileUploadElementBlock.tsx
@@ -15,7 +15,7 @@ export const FileUploadElementBlock = (props: FileUploadElementBlockProps) => {
         ext = ext.trim();
         return (ext[0] != ".") ? `.${ext}` : ext;
     }).join(",") : "";
-    const { isVisible, validationResults, extraAttr, validatorClasses } = elementContext;
+    const { isVisible, validationResults, extraAttr, validatorClasses, elementRef } = elementContext;
 
     return useMemo(()=>(
         <ElementWrapper className={`FormFileUpload ${validatorClasses}`} validationResults={validationResults} isVisible={isVisible}>
@@ -31,6 +31,7 @@ export const FileUploadElementBlock = (props: FileUploadElementBlockProps) => {
                 accept={allowedTypes}
                 aria-describedby={element.key + "_desc"}
                 onChange={handleChange}
+                ref={elementRef}
             />
             <div className="FormFileUpload__PostedFile"></div>
 

diff --git a/src/@optimizely/forms-react/src/components/elements/NumberElementBlock.tsx b/src/@optimizely/forms-react/src/components/elements/NumberElementBlock.tsx
@@ -11,7 +11,7 @@ export interface NumberElementBlockProps {
 export const NumberElementBlock = (props: NumberElementBlockProps) => {
     const { element } = props;
     const { elementContext, handleChange, handleBlur } = useElement(element);
-    const { isVisible, validationResults, value, extraAttr, validatorClasses } = elementContext;
+    const { isVisible, validationResults, value, extraAttr, validatorClasses, elementRef } = elementContext;
 
     return useMemo(()=>(
         <ElementWrapper className={`FormTextbox FormTextbox--Number ${validatorClasses}`} validationResults={validationResults} isVisible={isVisible}>
@@ -30,6 +30,7 @@ export const NumberElementBlock = (props: NumberElementBlockProps) => {
                     autoComplete={element.properties.autoComplete}
                     onChange={handleChange}
                     onBlur={handleBlur}
+                    ref={elementRef}
                 />
 
                 <ValidationMessage element={element} validationResults={validationResults} />

diff --git a/src/@optimizely/forms-react/src/components/elements/SelectionElementBlock.tsx b/src/@optimizely/forms-react/src/components/elements/SelectionElementBlock.tsx
@@ -11,7 +11,7 @@ interface SelectionElementBlockProps {
 export const SelectionElementBlock = (props: SelectionElementBlockProps) => {
     const { element } = props;
     const { elementContext, handleChange, handleBlur } = useElement(element);
-    const { isVisible, validationResults, value, extraAttr, validatorClasses } = elementContext;
+    const { isVisible, validationResults, value, extraAttr, validatorClasses, elementRef } = elementContext;
 
     return useMemo(()=>(
         <ElementWrapper className={`FormSelection ${validatorClasses}`} validationResults={validationResults} isVisible={isVisible}>
@@ -26,6 +26,7 @@ export const SelectionElementBlock = (props: SelectionElementBlockProps) => {
                 onChange={handleChange}
                 onBlur={handleBlur}
                 value={value}
+                ref={elementRef}
             >
                 <option value="" disabled={value !== ""}>
                     {isNullOrEmpty(element.properties.placeHolder) 

diff --git a/src/@optimizely/forms-react/src/components/elements/TextareaElementBlock.tsx b/src/@optimizely/forms-react/src/components/elements/TextareaElementBlock.tsx
@@ -11,7 +11,7 @@ export interface TextareaElementBlockProps {
 export const TextareaElementBlock = (props: TextareaElementBlockProps) => {
     const { element } = props;
     const { elementContext, handleChange, handleBlur } = useElement(element);
-    const { isVisible, validationResults, value, extraAttr, validatorClasses } = elementContext;
+    const { isVisible, validationResults, value, extraAttr, validatorClasses, elementRef } = elementContext;
     return useMemo(()=>(
         <ElementWrapper className={`FormTextbox FormTextbox--Textarea ${validatorClasses}`} validationResults={validationResults} isVisible={isVisible}>
             <ElementCaption element={element} />
@@ -27,6 +27,7 @@ export const TextareaElementBlock = (props: TextareaElementBlockProps) => {
                 autoComplete={element.properties.autoComplete}
                 onChange={handleChange}
                 onBlur={handleBlur}
+                ref={elementRef}
             >
             </textarea>
 

diff --git a/src/@optimizely/forms-react/src/components/elements/TextboxElementBlock.tsx b/src/@optimizely/forms-react/src/components/elements/TextboxElementBlock.tsx
@@ -11,7 +11,7 @@ export interface TextboxElementBlockProps {
 export const TextboxElementBlock = (props: TextboxElementBlockProps) => {
     const { element } = props;
     const { elementContext, handleChange, handleBlur } = useElement(element);
-    const { isVisible, validationResults, value, validatorClasses, extraAttr } = elementContext;
+    const { isVisible, validationResults, value, elementRef, validatorClasses, extraAttr } = elementContext;
     return useMemo(()=>(
         <ElementWrapper className={`FormTextbox ${validatorClasses}`} validationResults={validationResults} isVisible={isVisible}>
             <ElementCaption element={element} />
@@ -24,6 +24,7 @@ export const TextboxElementBlock = (props: TextboxElementBlockProps) => {
                 {...extraAttr}
                 onChange={handleChange}
                 onBlur={handleBlur} 
+                ref={elementRef}
             />
 
             <ValidationMessage element={element} validationResults={validationResults} />

diff --git a/src/@optimizely/forms-react/src/components/elements/UrlElementBlock.tsx b/src/@optimizely/forms-react/src/components/elements/UrlElementBlock.tsx
@@ -11,7 +11,7 @@ export interface UrlElementBlockProps {
 export const UrlElementBlock = (props: UrlElementBlockProps) => {
     const { element } = props;
     const { elementContext, handleChange, handleBlur } = useElement(element);
-    const { isVisible, validationResults, value, extraAttr, validatorClasses } = elementContext;
+    const { isVisible, validationResults, value, extraAttr, validatorClasses, elementRef } = elementContext;
     return useMemo(()=>(
         <ElementWrapper className={`FormTextbox__Input FormUrl__Input ${validatorClasses}`} validationResults={validationResults} isVisible={isVisible}>
             <ElementCaption element={element} />
@@ -26,6 +26,7 @@ export const UrlElementBlock = (props: UrlElementBlockProps) => {
                 aria-describedby={`${element.key}_desc`}
                 onChange={handleChange}
                 onBlur={handleBlur}
+                ref={elementRef}
             />
 
             <ValidationMessage element={element} validationResults={validationResults} />

diff --git a/src/@optimizely/forms-react/src/components/elements/shared/ElementWrapper.tsx b/src/@optimizely/forms-react/src/components/elements/shared/ElementWrapper.tsx
@@ -1,11 +1,11 @@
-import { FormValidationResult, isInArray, isNull } from "@optimizely/forms-sdk";
+import { ElementValidationResult } from "@optimizely/forms-sdk";
 import React, { ReactNode } from "react";
 
 export interface ElementWrapperProps{
     className?: string
     isVisible: boolean,
     children: ReactNode,
-    validationResults?: FormValidationResult[]
+    validationResults?: ElementValidationResult[]
 }
 
 export default function ElementWrapper(props: ElementWrapperProps){

diff --git a/src/@optimizely/forms-react/src/components/elements/shared/ValidationMessage.tsx b/src/@optimizely/forms-react/src/components/elements/shared/ValidationMessage.tsx
@@ -1,9 +1,9 @@
-import { ValidatableElementBase, FormValidationResult, isNull } from "@optimizely/forms-sdk";
+import { ValidatableElementBase, ElementValidationResult, isNull } from "@optimizely/forms-sdk";
 import React from "react";
 
 interface ValidationMessageProps {
     element: ValidatableElementBase,
-    validationResults: FormValidationResult[]
+    validationResults: ElementValidationResult[]
 }
 
 export const ValidationMessage = (props: ValidationMessageProps) => {

diff --git a/src/@optimizely/forms-react/src/context/dispatchFunctions.ts b/src/@optimizely/forms-react/src/context/dispatchFunctions.ts
@@ -1,4 +1,4 @@
-import { FormContainer, FormValidationResult } from "@optimizely/forms-sdk";
+import { FormContainer, ElementValidationResult, FormValidationResult } from "@optimizely/forms-sdk";
 import { ActionType } from "./reducer";
 import { initState } from "./initState";
 
@@ -8,14 +8,21 @@ export class DispatchFunctions {
         this._dispatch = dispatch;
     }
 
-    dispatchUpdateValidation = (elementKey: string, validationResults: FormValidationResult[]) => {
+    dispatchUpdateValidation = (elementKey: string, validationResults: ElementValidationResult[]) => {
         this._dispatch({
             type: ActionType.UpdateValidation,
             elementKey: elementKey,
             validationResults
         });
     }
 
+    dispatchUpdateAllValidation = (formValidationResults: FormValidationResult[]) => {
+        this._dispatch({
+            type: ActionType.UpdateAllValidation,
+            formValidationResults
+        });
+    }
+
     dispatchUpdateValue = (elementKey: string, value: any) => {
         this._dispatch({
             type: ActionType.UpdateValue,
@@ -46,4 +53,11 @@ export class DispatchFunctions {
             }
         });
     }
+
+    dispatchFocusOn = (focusOn: string) => {
+        this._dispatch({
+            type: ActionType.UpdateFocusOn,
+            focusOn
+        });
+    }
 }
diff --git a/src/@optimizely/forms-react/src/context/initState.ts b/src/@optimizely/forms-react/src/context/initState.ts
@@ -1,11 +1,11 @@
-import { ConditionProperties, 
+import {
     FormContainer, 
     ValidatableElementBaseProperties, 
     getDefaultValue, 
     isNull,
     FormState, 
     FormSubmission, 
-    FormValidation, 
+    ElementValidationResult, 
     FormValidationResult, 
     StepDependencies } from "@optimizely/forms-sdk";
 
@@ -17,7 +17,7 @@ export function initState(props: InitStateProps): FormState{
     const { formContainer } = props;
 
     let formSubmissions = [] as FormSubmission[];
-    let formValidations = [] as FormValidation[];
+    let formValidationResults = [] as FormValidationResult[];
     let stepDependencies = [] as StepDependencies[];
 
     formContainer?.steps.forEach(s => {
@@ -27,24 +27,22 @@ export function initState(props: InitStateProps): FormState{
 
             //init form validation
             let validatableProps = e.properties as ValidatableElementBaseProperties;
-            let formValidationResults = [] as FormValidationResult[];
+            let elementValidationResults = [] as ElementValidationResult[];
 
             //some elements don't have validator
             if(!isNull(validatableProps.validators))
             {
                 validatableProps.validators.forEach(v => {
-                    formValidationResults = formValidationResults.concat({type: v.type, valid: true}); //default valid = true to hide message
+                    elementValidationResults = elementValidationResults.concat({type: v.type, valid: true}); //default valid = true to hide message
                 });
             }
 
-            formValidations = formValidations.concat({elementKey: e.key, results: formValidationResults});
+            formValidationResults = formValidationResults.concat({elementKey: e.key, results: elementValidationResults});
         });
         stepDependencies = stepDependencies.concat({elementKey: s.formStep.key, isSatisfied: false });
     });
 
-
-
     return {
-        isReset: false, formSubmissions, formValidations, stepDependencies, formContainer, dependencyInactiveElements: []
+        isReset: false, formSubmissions, formValidationResults, stepDependencies, formContainer, dependencyInactiveElements: [], focusOn: ""
     } as FormState;
 }
diff --git a/src/@optimizely/forms-react/src/context/reducer.ts b/src/@optimizely/forms-react/src/context/reducer.ts
@@ -1,14 +1,16 @@
 import { equals,
   FormState, 
   FormSubmission, 
-  FormValidation } from "@optimizely/forms-sdk";
+  FormValidationResult } from "@optimizely/forms-sdk";
 
 export enum ActionType {
     UpdateValue = "UpdateValue",
     UpdateValidation = "UpdateValidation",
     UpdateDependencies = "UpdateDependencies",
     ResetForm = "ResetForm",
-    ResetedForm = "ResetedForm"
+    ResetedForm = "ResetedForm",
+    UpdateAllValidation = "UpdateAllValidation",
+    UpdateFocusOn = "UpdateFocusOn"
 }
 
 export function formReducer(formState: FormState, action: any) {
@@ -25,12 +27,18 @@ export function formReducer(formState: FormState, action: any) {
       case ActionType.UpdateValidation: {
         return {
             ...formState,
-            formValidations: formState.formValidations.map(fv => equals(fv.elementKey, action.elementKey) ? {
+            formValidationResults: formState.formValidationResults.map(fv => equals(fv.elementKey, action.elementKey) ? {
                 elementKey: action.elementKey,
                 results: action.validationResults
-            } as FormValidation : fv)
+            } as FormValidationResult : fv)
         } as FormState;
       }
+      case ActionType.UpdateAllValidation: {
+        return {
+          ...formState,
+          formValidationResults: action.formValidationResults
+      } as FormState;
+      }
       case ActionType.UpdateDependencies: {
         return {
             ...formState,
@@ -46,6 +54,12 @@ export function formReducer(formState: FormState, action: any) {
           isReset: false
         } as FormState;
       }
+      case ActionType.UpdateFocusOn: {
+        return {
+          ...formState,
+          focusOn: action.focusOn
+        } as FormState;
+      }
       default: {
         return formState;
       }