♻️ [open-formulieren/open-forms#4420] Use zod for addressNL validation

open-formulieren · Sep 16, 2024 · e008597 · e008597
1 parent dba3556
commit e008597
Showing 1 changed file with 28 additions and 16 deletions.
diff --git a/src/formio/components/AddressNL.js b/src/formio/components/AddressNL.js
@@ -201,14 +201,28 @@ const FIELD_LABELS = defineMessages({
   },
 });
 
-const addressNLSchema = (required, intl) => {
+const addressNLSchema = (
+  required,
+  intl,
+  postCodePattern,
+  postCodeError,
+  cityPattern,
+  cityError
+) => {
   let postcodeSchema = z.string().regex(/^[1-9][0-9]{3} ?(?!sa|sd|ss|SA|SD|SS)[a-zA-Z]{2}$/, {
     message: intl.formatMessage({
       description:
         'ZOD error message when AddressNL postcode does not match the postcode regular expression',
       defaultMessage: 'Postcode must be four digits followed by two letters (e.g. 1234 AB).',
     }),
   });
+  if (postCodePattern && postCodeError)
+    postcodeSchema = postcodeSchema.regex(new RegExp(postCodePattern), {message: postCodeError});
+
+  let citySchema = z.string();
+  if (cityPattern && cityError)
+    citySchema = citySchema.regex(new RegExp(cityPattern), {message: cityError});
+
   let houseNumberSchema = z.string().regex(/^\d{1,5}$/, {
     message: intl.formatMessage({
       description:
@@ -224,6 +238,7 @@ const addressNLSchema = (required, intl) => {
   return z
     .object({
       postcode: postcodeSchema,
+      city: citySchema.optional(),
       houseNumber: houseNumberSchema,
       houseLetter: z
         .string()
@@ -278,6 +293,14 @@ const addressNLSchema = (required, intl) => {
 const AddressNLForm = ({initialValues, required, deriveAddress, layout, setFormioValues}) => {
   const intl = useIntl();
 
+  const {component} = useContext(ConfigContext);
+  const postCodeComponent = component.openForms.components?.postcode;
+  const cityComponent = component.openForms.components?.city;
+  const postCodePattern = postCodeComponent?.validate?.pattern;
+  const postCodeError = postCodeComponent?.translatedErrors[intl.locale].pattern;
+  const cityPattern = cityComponent?.validate?.pattern;
+  const cityError = cityComponent?.translatedErrors[intl.locale].pattern;
+
   const errorMap = (issue, ctx) => {
     switch (issue.code) {
       case z.ZodIssueCode.invalid_type: {
@@ -311,7 +334,10 @@ const AddressNLForm = ({initialValues, required, deriveAddress, layout, setFormi
         postcode: true,
         houseNumber: true,
       }}
-      validationSchema={toFormikValidationSchema(addressNLSchema(required, intl), {errorMap})}
+      validationSchema={toFormikValidationSchema(
+        addressNLSchema(required, intl, postCodePattern, postCodeError, cityPattern, cityError),
+        {errorMap}
+      )}
     >
       <FormikAddress
         required={required}
@@ -416,7 +442,6 @@ const FormikAddress = ({required, setFormioValues, deriveAddress, layout}) => {
                 defaultMessage="City"
               />
             }
-            validate={validateCity}
             alwaysShowErrors={true}
             disabled
           />
@@ -446,26 +471,13 @@ const PostCodeField = ({required, autoFillAddress}) => {
     autoFillAddress();
   };
 
-  const validate = data => {
-    const postcodePattern = new RegExp(component.openForms.components?.postcode?.validate?.pattern);
-
-    if (!postcodePattern) return;
-
-    let error;
-    if (!postcodePattern.test(data)) {
-      error = component.openForms.components.postcode.translatedErrors[intl.locale].pattern;
-    }
-    return error;
-  };
-
   return (
     <TextField
       name="postcode"
       label={<FormattedMessage {...FIELD_LABELS.postcode} />}
       placeholder="1234 AB"
       isRequired={required}
       onBlur={onBlur}
-      validate={validate}
     />
   );
 };