Merge pull request #804 from cultuurnet/feature/III-5817

III-5817 - Handle validation for custom age ranges
cultuurnet · Oct 12, 2023 · 6c1abe5 · 6c1abe5
2 parents 252f6e5 + dc1458a
commit 6c1abe5
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 5 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": {

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": {

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": {

diff --git a/src/pages/steps/AgeRangeStep.tsx b/src/pages/steps/AgeRangeStep.tsx
@@ -216,6 +216,7 @@ const AgeRangeStep = ({
                         </Text>
                         <Input
                           marginRight={3}
+                          type="numeric"
                           value={customMinAgeRange}
                           placeholder={t('create.name_and_age.age.from')}
                           onChange={(event) => {
@@ -236,6 +237,7 @@ const AgeRangeStep = ({
                         </Text>
                         <Input
                           marginRight={3}
+                          type="numeric"
                           value={customMaxAgeRange}
                           placeholder={t('create.name_and_age.age.till')}
                           onChange={(event) => {
@@ -262,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');

diff --git a/src/ui/Input.tsx b/src/ui/Input.tsx
@@ -25,6 +25,7 @@ type InputType =
   | 'image'
   | 'month'
   | 'number'
+  | 'numeric'
   | 'password'
   | 'radio'
   | 'range'