🐛 Update validation method for forms to validate onBlur & onChange

client/src/app/components/HookFormPFFields/HookFormPFGroupController.tsx

@@ -59,8 +59,9 @@ export const HookFormPFGroupController = <
     control={control}
     name={name}
     render={({ field, fieldState, formState }) => {
-      const { isDirty, error } = fieldState;
-      const shouldDisplayError = error?.message && isDirty && !errorsSuppressed;
+      const { isDirty, isTouched, error } = fieldState;
+      const shouldDisplayError =
+        error?.message && (isDirty || isTouched) && !errorsSuppressed;
       return (
         <FormGroup
           labelIcon={labelIcon}

client/src/app/components/HookFormPFFields/HookFormPFTextArea.tsx

@@ -30,7 +30,7 @@ export const HookFormPFTextArea = <
       {...extractedProps}
       renderInput={({
         field: { onChange, onBlur, value, name, ref },
-        fieldState: { isDirty, error },
+        fieldState: { isDirty, error, isTouched },
       }) => (
         <TextArea
           ref={ref}
@@ -44,7 +44,7 @@ export const HookFormPFTextArea = <
           validated={
             errorsSuppressed
               ? "default"
-              : getValidatedFromErrors(error, isDirty)
+              : getValidatedFromErrors(error, isDirty, isTouched)
           }
           {...remainingProps}
         />

client/src/app/components/HookFormPFFields/HookFormPFTextInput.tsx

@@ -31,7 +31,7 @@ export const HookFormPFTextInput = <
       {...extractedProps}
       renderInput={({
         field: { onChange, onBlur, value, name, ref },
-        fieldState: { isDirty, error },
+        fieldState: { isDirty, error, isTouched },
       }) => (
         <TextInput
           ref={ref}
@@ -56,7 +56,7 @@ export const HookFormPFTextInput = <
           validated={
             errorsSuppressed
               ? "default"
-              : getValidatedFromErrors(error, isDirty)
+              : getValidatedFromErrors(error, isDirty, isTouched)
           }
           {...remainingProps}
         />

client/src/app/components/StringListField.tsx

@@ -62,7 +62,7 @@ export const StringListField: React.FC<StringListFieldProps> = ({
         label={itemToAddLabel}
         renderInput={({
           field: { onChange, onBlur, value, ref },
-          fieldState: { isDirty, error },
+          fieldState: { isDirty, error, isTouched },
         }) => {
           const isValid = !!value && !error;
           const addItem = () => {
@@ -75,7 +75,7 @@ export const StringListField: React.FC<StringListFieldProps> = ({
                 ref={ref}
                 id={itemToAddFieldId}
                 aria-label={itemToAddAriaLabel}
-                validated={getValidatedFromErrors(error, isDirty)}
+                validated={getValidatedFromErrors(error, isDirty, isTouched)}
                 value={value}
                 onChange={(_, value) => onChange(value)}
                 onBlur={onBlur}

client/src/app/pages/applications/analysis-wizard/analysis-wizard.tsx

@@ -175,7 +175,7 @@ export const AnalysisWizard: React.FC<IAnalysisWizard> = ({
       autoTaggingEnabled: true,
     },
     resolver: yupResolver(allFieldsSchema),
-    mode: "onChange",
+    mode: "all",
   });
 
   const { handleSubmit, watch, reset } = methods;

client/src/app/pages/applications/analysis-wizard/set-options.tsx

@@ -88,7 +88,7 @@ export const SetOptions: React.FC = () => {
         fieldId="target-labels"
         renderInput={({
           field: { onChange, onBlur },
-          fieldState: { isDirty, error },
+          fieldState: { isDirty, error, isTouched },
         }) => {
           const targetSelections = formLabels
             .map((formLabel) => {
@@ -139,7 +139,7 @@ export const SetOptions: React.FC = () => {
               onClear={() => {
                 onChange([]);
               }}
-              validated={getValidatedFromErrors(error, isDirty)}
+              validated={getValidatedFromErrors(error, isDirty, isTouched)}
             >
               {defaultTargetsAndTargetsLabels.map((targetLabel, index) => (
                 <SelectOption
@@ -159,7 +159,7 @@ export const SetOptions: React.FC = () => {
         fieldId="sources"
         renderInput={({
           field: { onChange, onBlur, value },
-          fieldState: { isDirty, error },
+          fieldState: { isDirty, error, isTouched },
         }) => {
           const sourceSelections = formLabels
             .map((formLabel) => {
@@ -211,7 +211,7 @@ export const SetOptions: React.FC = () => {
               onClear={() => {
                 onChange([]);
               }}
-              validated={getValidatedFromErrors(error, isDirty)}
+              validated={getValidatedFromErrors(error, isDirty, isTouched)}
             >
               {defaultSourcesAndSourcesLabels.map((targetLabel, index) => (
                 <SelectOption

client/src/app/pages/applications/application-assessment/components/application-assessment-wizard/application-assessment-wizard.tsx

@@ -115,7 +115,7 @@ export const ApplicationAssessmentWizard: React.FC<
         [SAVE_ACTION_KEY]: SAVE_ACTION_VALUE.SAVE_AS_DRAFT,
       };
     }, [assessment]),
-    mode: "onChange",
+    mode: "all",
   });
   const values = methods.getValues();
 

client/src/app/pages/applications/application-review/components/review-form/review-form.tsx

@@ -98,7 +98,7 @@ export const ReviewForm: React.FC<IReviewFormProps> = ({
       comments: review?.comments || "",
     },
     resolver: yupResolver(validationSchema),
-    mode: "onChange",
+    mode: "all",
   });
 
   const onInvalid = (errors: FieldErrors<FormValues>) => {

client/src/app/pages/applications/components/application-form/application-form.tsx

@@ -255,7 +255,7 @@ export const ApplicationForm: React.FC<ApplicationFormProps> = ({
       packaging: getBinaryInitialValue(application, "packaging"),
     },
     resolver: yupResolver(validationSchema),
-    mode: "onChange",
+    mode: "all",
   });
 
   const buildBinaryFieldString = (

client/src/app/pages/applications/components/application-identity-form/application-identity-form.tsx

@@ -159,7 +159,7 @@ export const ApplicationIdentityForm: React.FC<
     resolver: yupResolver(
       validationSchema({ [SOURCE_CREDENTIALS]: false, [MAVEN_SETTINGS]: false })
     ),
-    mode: "onChange",
+    mode: "all",
   });
 
   useEffect(() => {

client/src/app/pages/controls/business-services/components/business-service-form.tsx

@@ -89,7 +89,7 @@ export const BusinessServiceForm: React.FC<BusinessServiceFormProps> = ({
       owner: businessService?.owner?.name,
     },
     resolver: yupResolver(validationSchema),
-    mode: "onChange",
+    mode: "all",
   });
 
   const onCreateBusinessServiceSuccess = (

client/src/app/pages/controls/job-functions/components/job-function-form.tsx

@@ -67,7 +67,7 @@ export const JobFunctionForm: React.FC<JobFunctionFormProps> = ({
       name: jobFunction?.name || "",
     },
     resolver: yupResolver(validationSchema),
-    mode: "onChange",
+    mode: "all",
   });
 
   const onCreateJobFunctionSuccess = (response: AxiosResponse<JobFunction>) => {

client/src/app/pages/controls/stakeholder-groups/components/stakeholder-group-form.tsx

@@ -106,7 +106,7 @@ export const StakeholderGroupForm: React.FC<StakeholderGroupFormProps> = ({
       ),
     },
     resolver: yupResolver(validationSchema),
-    mode: "onChange",
+    mode: "all",
   });
 
   const onCreateStakeholderGroupSuccess = (

client/src/app/pages/controls/stakeholders/components/stakeholder-form.tsx

@@ -111,7 +111,7 @@ export const StakeholderForm: React.FC<StakeholderFormProps> = ({
       ),
     },
     resolver: yupResolver(validationSchema),
-    mode: "onChange",
+    mode: "all",
   });
 
   const onCreateStakeholderSuccess = (_: AxiosResponse<Stakeholder>) =>

client/src/app/pages/controls/tags/components/tag-category-form.tsx

@@ -92,7 +92,7 @@ export const TagCategoryForm: React.FC<TagCategoryFormProps> = ({
         : null,
     },
     resolver: yupResolver(validationSchema),
-    mode: "onChange",
+    mode: "all",
   });
 
   const onTagSuccess = (_: AxiosResponse<TagCategory>) =>

client/src/app/pages/controls/tags/components/tag-form.tsx

@@ -86,7 +86,7 @@ export const TagForm: React.FC<TagFormProps> = ({ tag, onClose }) => {
       tagCategory: tagCategoryInitialValue?.name,
     },
     resolver: yupResolver(validationSchema),
-    mode: "onChange",
+    mode: "all",
   });
 
   const onTagSuccess = (_: AxiosResponse<Tag>) =>

client/src/app/pages/external/jira/tracker-form.tsx

@@ -176,7 +176,7 @@ export const TrackerForm: React.FC<TrackerFormProps> = ({
       insecure: tracker?.insecure || false,
     },
     resolver: yupResolver(validationSchema),
-    mode: "onChange",
+    mode: "all",
   });
 
   const values = getValues();

client/src/app/pages/identities/components/identity-form/identity-form.tsx

@@ -392,7 +392,7 @@ export const IdentityForm: React.FC<IdentityFormProps> = ({
       user: identity?.user || "",
     },
     resolver: yupResolver(validationSchema),
-    mode: "onChange",
+    mode: "all",
   });
 
   const values = getValues();

client/src/app/pages/migration-targets/components/custom-target-form.tsx

@@ -184,7 +184,7 @@ export const CustomTargetForm: React.FC<CustomTargetFormProps> = ({
       rootPath: target?.ruleset?.repository?.path,
     },
     resolver: yupResolver(validationSchema),
-    mode: "onChange",
+    mode: "all",
   });
 
   const {
@@ -308,7 +308,6 @@ export const CustomTargetForm: React.FC<CustomTargetFormProps> = ({
               return handleFileUpload(defaultImageFile);
             })
             .then((res) => {
-              console.log("res ", res);
               updateTarget({
                 ...payload,
                 image: { id: res.id },
@@ -329,7 +328,6 @@ export const CustomTargetForm: React.FC<CustomTargetFormProps> = ({
               return handleFileUpload(defaultImageFile);
             })
             .then((res) => {
-              console.log("res ", res);
               createTarget({
                 ...payload,
                 image: { id: res.id },

client/src/app/pages/migration-waves/components/export-form.tsx

@@ -92,7 +92,7 @@ export const ExportForm: React.FC<ExportFormProps> = ({
       kind: "",
     },
     resolver: yupResolver(validationSchema),
-    mode: "onChange",
+    mode: "all",
   });
 
   const values = watch();

client/src/app/pages/migration-waves/components/migration-wave-form.tsx

@@ -211,7 +211,7 @@ export const WaveForm: React.FC<WaveFormProps> = ({
     watch,
     trigger,
   } = useForm<WaveFormValues>({
-    mode: "onChange",
+    mode: "all",
     defaultValues: {
       name: migrationWave?.name || "",
       startDateStr: migrationWave?.startDate

client/src/app/pages/proxies/proxy-form.tsx

@@ -95,7 +95,7 @@ export const ProxyForm: React.FC<ProxyFormProps> = ({
       [httpProxy, httpsProxy]
     ),
     resolver: yupResolver(useProxyFormValidationSchema()),
-    mode: "onChange",
+    mode: "all",
   });
 
   const values = getValues();
@@ -271,7 +271,7 @@ export const ProxyForm: React.FC<ProxyFormProps> = ({
               isRequired
               renderInput={({
                 field: { onChange, value },
-                fieldState: { isDirty, error },
+                fieldState: { isDirty, error, isTouched },
               }) => (
                 <SimpleSelect
                   id="httpIdentity"
@@ -284,7 +284,7 @@ export const ProxyForm: React.FC<ProxyFormProps> = ({
                     const selectionValue = selection as OptionWithValue<string>;
                     onChange(selectionValue.value);
                   }}
-                  validated={getValidatedFromErrors(error, isDirty)}
+                  validated={getValidatedFromErrors(error, isDirty, isTouched)}
                 />
               )}
             />
@@ -357,7 +357,7 @@ export const ProxyForm: React.FC<ProxyFormProps> = ({
               className={spacing.mMd}
               renderInput={({
                 field: { onChange, value },
-                fieldState: { isDirty, error },
+                fieldState: { isDirty, error, isTouched },
               }) => (
                 <SimpleSelect
                   toggleId="https-proxy-credentials-select-toggle"
@@ -369,7 +369,7 @@ export const ProxyForm: React.FC<ProxyFormProps> = ({
                     const selectionValue = selection as OptionWithValue<string>;
                     onChange(selectionValue.value);
                   }}
-                  validated={getValidatedFromErrors(error, isDirty)}
+                  validated={getValidatedFromErrors(error, isDirty, isTouched)}
                 />
               )}
             />

client/src/app/utils/utils.test.ts

@@ -70,16 +70,18 @@ describe("utils", () => {
   it("getValidatedFromErrors: given 'error' and 'touched' return 'error'", () => {
     const error = "Any value";
     const dirty = true;
+    const isTouched = true;
 
-    const status = getValidatedFromErrors(error, dirty);
+    const status = getValidatedFromErrors(error, dirty, isTouched);
     expect(status).toBe("error");
   });
 
   it("getValidatedFromErrors: given 'error' but not 'touched' return 'default'", () => {
     const error = "Any value";
     const dirty = false;
+    const isTouched = false;
 
-    const status = getValidatedFromErrors(error, dirty);
+    const status = getValidatedFromErrors(error, dirty, isTouched);
     expect(status).toBe("default");
   });
 

client/src/app/utils/utils.ts

@@ -92,9 +92,10 @@ export const objectKeys = <T extends Object>(obj: T) =>
 
 export const getValidatedFromErrors = (
   error: unknown | undefined,
-  dirty: boolean | undefined
+  dirty: boolean | undefined,
+  isTouched: boolean | undefined
 ) => {
-  return error && dirty ? "error" : "default";
+  return error && (dirty || isTouched) ? "error" : "default";
 };
 
 export const getValidatedFromError = (error: unknown | undefined) => {