CCM-8579: Client side validation

Author: ClareJonesBJSS

frontend/src/components/forms/LetterTemplateForm/LetterTemplateForm.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { FC, useActionState } from 'react';
+import { FC, useActionState, useState } from 'react';
 import {
   TextInput,
   HintText,
@@ -16,6 +16,7 @@ import {
   alphabeticalLanguageList,
   alphabeticalLetterTypeList,
   CreateLetterTemplate,
+  FormErrorState,
   PageComponentProps,
 } from 'nhs-notify-web-template-management-utils';
 import content from '@content/content';
@@ -24,6 +25,7 @@ import { NHSNotifyMain } from '@atoms/NHSNotifyMain/NHSNotifyMain';
 import { NHSNotifyButton } from '@atoms/NHSNotifyButton/NHSNotifyButton';
 import FileUpload from '@atoms/FileUpload/FileUpload';
 import { getBasePath } from '@utils/get-base-path';
+import { $CreateLetterTemplateSchema } from './form-schema';
 
 export const LetterTemplateForm: FC<
   PageComponentProps<CreateLetterTemplate>
@@ -50,6 +52,9 @@ export const LetterTemplateForm: FC<
   } = content.components.templateFormLetter;
 
   const [state, action] = useActionState(processFormActions, initialState);
+  const [validationError, setValidationError] = useState<
+    FormErrorState | undefined
+  >(state.validationError);
 
   const [letterTemplateName, letterTemplateNameHandler] =
     useTextInput<HTMLInputElement>(state.name);
@@ -61,19 +66,29 @@ export const LetterTemplateForm: FC<
     useTextInput<HTMLSelectElement>(state.language);
 
   const templateNameError =
-    state.validationError?.fieldErrors.letterTemplateName?.join(', ');
+    validationError?.fieldErrors.letterTemplateName?.join(', ');
 
   const templateLetterTypeError =
-    state.validationError?.fieldErrors.letterTemplateLetterType?.join(', ');
+    validationError?.fieldErrors.letterTemplateLetterType?.join(', ');
 
   const templateLanguageError =
-    state.validationError?.fieldErrors.letterTemplateLanguage?.join(', ');
+    validationError?.fieldErrors.letterTemplateLanguage?.join(', ');
 
   const templatePdfError =
-    state.validationError?.fieldErrors.letterTemplatePdf?.join(', ');
+    validationError?.fieldErrors.letterTemplatePdf?.join(', ');
 
   const templateCsvError =
-    state.validationError?.fieldErrors.letterTemplateCsv?.join(', ');
+    validationError?.fieldErrors.letterTemplateCsv?.join(', ');
+
+  const validateForm = (event: React.FormEvent<HTMLFormElement>) => {
+    const formData = new FormData(event.currentTarget);
+    const data = Object.fromEntries(formData);
+    const validationResult = $CreateLetterTemplateSchema.safeParse(data);
+    if (!validationResult.success) {
+      event.preventDefault();
+      setValidationError(validationResult.error.flatten());
+    }
+  };
 
   return (
     <>
@@ -87,6 +102,7 @@ export const LetterTemplateForm: FC<
             <NHSNotifyFormWrapper
               action={action}
               formId='create-letter-template'
+              formAttributes={{ onSubmit: validateForm }}
             >
               <h1 className='nhsuk-heading-xl' data-testid='page-heading'>
                 {pageHeading}

frontend/src/components/forms/LetterTemplateForm/form-schema.ts

@@ -0,0 +1,34 @@
+import { LANGUAGE_LIST, LETTER_TYPE_LIST } from 'nhs-notify-backend-client';
+import { z } from 'zod';
+
+export const $CreateLetterTemplateSchema = z.object({
+  letterTemplateName: z
+    .string({ message: 'Enter a template name' })
+    .min(1, { message: 'Enter a template name' }),
+  letterTemplateLetterType: z.enum(LETTER_TYPE_LIST, {
+    message: 'Choose a letter type',
+  }),
+  letterTemplateLanguage: z.enum(LANGUAGE_LIST, {
+    message: 'Choose a language',
+  }),
+  letterTemplatePdf: z
+    .instanceof(File, {
+      message: 'Select a letter template PDF',
+    })
+    .refine((pdf) => pdf.size <= 5 * 1024 * 1024, {
+      message: `The letter template PDF is too large. The file must be smaller than 5MB`,
+    })
+    .refine((pdf) => pdf.type === 'application/pdf', {
+      message: 'Select a letter template PDF',
+    }),
+  letterTemplateCsv: z
+    .instanceof(File, {
+      message: 'Select a valid test data .csv file',
+    })
+    .refine((csv) => csv.size <= 10 * 1024, {
+      message: `The test data CSV is too large. The file must be smaller than 10KB`,
+    })
+    .refine((csv) => csv.size === 0 || csv.type === 'text/csv', {
+      message: 'Select a valid test data .csv file',
+    }),
+});

frontend/src/components/forms/LetterTemplateForm/server-action.ts

@@ -1,44 +1,13 @@
-import { z } from 'zod';
+'use server';
+
 import { createLetterTemplate } from '@utils/form-actions';
 import { redirect, RedirectType } from 'next/navigation';
-import { LANGUAGE_LIST, LETTER_TYPE_LIST } from 'nhs-notify-backend-client';
 import {
   CreateLetterTemplate,
   LetterTemplate,
   TemplateFormState,
 } from 'nhs-notify-web-template-management-utils';
-
-const $CreateLetterTemplateSchema = z.object({
-  letterTemplateName: z
-    .string({ message: 'Enter a template name' })
-    .min(1, { message: 'Enter a template name' }),
-  letterTemplateLetterType: z.enum(LETTER_TYPE_LIST, {
-    message: 'Choose a letter type',
-  }),
-  letterTemplateLanguage: z.enum(LANGUAGE_LIST, {
-    message: 'Choose a language',
-  }),
-  letterTemplatePdf: z
-    .instanceof(File, {
-      message: 'Select a letter template PDF',
-    })
-    .refine((pdf) => pdf.size <= 5 * 1024 * 1024, {
-      message: `The letter template PDF is too large. The file must be smaller than 5MB`,
-    })
-    .refine((pdf) => pdf.type === 'application/pdf', {
-      message: 'Select a letter template PDF',
-    }),
-  letterTemplateCsv: z
-    .instanceof(File, {
-      message: 'Select a valid test data .csv file',
-    })
-    .refine((csv) => csv.size <= 10 * 1024, {
-      message: `The test data CSV is too large. The file must be smaller than 10KB`,
-    })
-    .refine((csv) => csv.size === 0 || csv.type === 'text/csv', {
-      message: 'Select a valid test data .csv file',
-    }),
-});
+import { $CreateLetterTemplateSchema } from './form-schema';
 
 export async function processFormActions(
   formState: TemplateFormState<CreateLetterTemplate | LetterTemplate>,