III-5817 - Use Yup validation instead of custom validation

cultuurnet · Oct 11, 2023 · 9250c60 · 9250c60
1 parent 810f8ba
commit 9250c60
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 18 deletions.
diff --git a/src/i18n/de.json b/src/i18n/de.json
@@ -246,7 +246,8 @@
           "required": "Name ist erforderlich."
         },
         "age_range": {
-          "required": "Altersklasse erforderlich."
+          "required": "Altersklasse erforderlich.",
+          "matches": "Das angegebene Alter ist ungültig"
         }
       },
       "name": {
@@ -269,7 +270,6 @@
         "from": "Von",
         "till": "Bis",
         "age": "Jahre",
-        "error_not_valid": "Das angegebene Alter ist ungültig",
         "error_max_lower_than_min": "Das Höchstalter kann nicht unter dem Mindestalter liegen.",
         "error_no_min_age": "Bitte geben Sie ein Mindestalter ein"
       }

diff --git a/src/i18n/fr.json b/src/i18n/fr.json
@@ -246,7 +246,8 @@
           "required": "Nom est requis."
         },
         "age_range": {
-          "required": "Group d'âge est requis"
+          "required": "Group d'âge est requis",
+          "matches": "L'âge spécifié n'est pas valide"
         }
       },
       "name": {
@@ -269,7 +270,6 @@
         "from": "De",
         "till": "à",
         "age": "ans",
-        "error_not_valid": "L'âge spécifié n'est pas valide",
         "error_max_lower_than_min": "L'âge maximum ne peut être inférieur à l'âge minimum.",
         "error_no_min_age": "Veuillez entrer un âge minimum"
       }

diff --git a/src/i18n/nl.json b/src/i18n/nl.json
@@ -246,7 +246,8 @@
           "required": "Naam is verplicht."
         },
         "age_range": {
-          "required": "Leeftijdsgroep is verplicht."
+          "required": "Leeftijdsgroep is verplicht.",
+          "matches": "De opgegeven leeftijd is niet geldig"
         }
       },
       "name": {
@@ -269,7 +270,6 @@
         "from": "Van",
         "till": "Tot",
         "age": "jaar",
-        "error_not_valid": "De opgegeven leeftijd is niet geldig",
         "error_max_lower_than_min": "De maximumleeftijd kan niet lager zijn dan de minimumleeftijd.",
         "error_no_min_age": "Gelieve een minimum leeftijd in te vullen"
       }

diff --git a/src/pages/steps/AgeRangeStep.tsx b/src/pages/steps/AgeRangeStep.tsx
@@ -96,16 +96,6 @@ const AgeRangeStep = ({
   };
 
   const handleSubmitCustomAgeRange = (field: Field) => {
-    const numberRegex = new RegExp(/^\d+$/);
-
-    if (
-      !numberRegex.test(customMinAgeRange) ||
-      !numberRegex.test(customMaxAgeRange)
-    ) {
-      setCustomAgeRangeError(t('create.name_and_age.age.error_not_valid'));
-      return;
-    }
-
     if (parseInt(customMinAgeRange) > parseInt(customMaxAgeRange)) {
       setCustomAgeRangeError(
         t('create.name_and_age.age.error_max_lower_than_min'),
@@ -274,7 +264,7 @@ const AgeRangeStep = ({
               {errors.nameAndAgeRange?.typicalAgeRange && (
                 <Text color="red">
                   {t(
-                    'create.name_and_age.validation_messages.age_range.required',
+                    `create.name_and_age.validation_messages.age_range.${errors.nameAndAgeRange?.typicalAgeRange.type}`,
                   )}
                 </Text>
               )}

diff --git a/src/pages/steps/NameAndAgeRangeStep.tsx b/src/pages/steps/NameAndAgeRangeStep.tsx
@@ -19,6 +19,8 @@ import {
   StepsConfiguration,
 } from './Steps';
 
+const numberHyphenNumberRegex = /^\d+-\d+$/;
+
 const useEditNameAndAgeRange = ({
   scope,
   onSuccess,
@@ -81,7 +83,7 @@ const nameAndAgeRangeStepConfiguration: StepsConfiguration<'nameAndAgeRange'> =
     title: ({ t }) => t('create.name_and_age.title'),
     validation: yup.object().shape({
       name: yup.object().shape({}).required(),
-      typicalAgeRange: yup.string().required(),
+      typicalAgeRange: yup.string().matches(numberHyphenNumberRegex).required(),
     }),
     shouldShowStep: ({ watch, formState }) => {
       const location = watch('location');