Feat: getValidators() function for react-hook-form

src/app/[locale]/incident/add/components/questions/RadioInput.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { useTranslations } from 'next-intl'
 import { useFormStore } from '@/store/form_store'
 import { QuestionField } from '@/types/form'
+import { getValidators } from '@/lib/utils/form-validator'
 
 interface RadioGroupProps extends QuestionField {}
 
@@ -47,9 +48,7 @@ export const RadioInput = ({ field, register, errors }: RadioGroupProps) => {
       {Object.keys(field.meta.values).map((key: string) => (
         <div key={key}>
           <input
-            {...register(field.key, {
-              required: field.required ? t('required') : false,
-            })}
+            {...register(field.key, getValidators(field, t))}
             type="radio"
             id={`${field.key}-${key}`}
             value={key}

src/app/[locale]/incident/add/components/questions/TextInput.tsx

@@ -2,6 +2,7 @@ import { QuestionField } from '@/types/form'
 import React from 'react'
 import { useTranslations } from 'next-intl'
 import { useFormStore } from '@/store/form_store'
+import { getValidators } from '@/lib/utils/form-validator'
 
 interface TextInputProps extends QuestionField {}
 
@@ -45,9 +46,7 @@ export const TextInput = ({ field, register, errors }: TextInputProps) => {
         <span id={`${field.key}-${field.key}`}>{field.meta.subtitle}</span>
       )}
       <input
-        {...register(field.key, {
-          required: field.required ? t('required') : false,
-        })}
+        {...register(field.key, getValidators(field, t))}
         type="text"
         placeholder={field.meta.placeholder ? field.meta.placeholder : ''}
         defaultValue={getDefaultValueTextInput(field.key)}

src/lib/utils/form-validator.ts

@@ -0,0 +1,40 @@
+import { PublicQuestion } from '@/types/form'
+import { RegisterOptions } from 'react-hook-form'
+
+export const getValidators = (
+  field: PublicQuestion,
+  t: any
+): RegisterOptions => {
+  const validators: RegisterOptions = {}
+
+  // If field is required, set required validation rule
+  if (field.required) {
+    validators.required = t('required')
+  }
+
+  // If validators exist on the meta, loop through this
+  if (field.meta?.validators) {
+    field.meta.validators.forEach(
+      (validatorRule: string | [string, number]) => {
+        if (typeof validatorRule === 'string') {
+          // Handle single validator 'required'
+          if (validatorRule === 'required') {
+            validators.required = field.required ? t('required') : false
+          }
+        } else if (Array.isArray(validatorRule)) {
+          // Handle validators with parameters like ['maxLength', 100]
+          const [validatorName, validatorValue] = validatorRule
+
+          if (validatorName === 'maxLength') {
+            validators.maxLength = {
+              value: validatorValue,
+              message: t('max_length', { maxLength: validatorValue }),
+            }
+          }
+        }
+      }
+    )
+  }
+
+  return validators
+}

translations/en.json

@@ -89,7 +89,8 @@
       "submit_button": "Submit"
     },
     "errors": {
-      "required": "This field is required"
+      "required": "This field is required",
+      "max_length": "This field has a maximal length of {maxLength} characters"
     }
   },
   "routing": {

translations/nl.json

@@ -89,7 +89,8 @@
       "submit_button": "Verstuur"
     },
     "errors": {
-      "required": "Dit veld is verplicht"
+      "required": "Dit veld is verplicht",
+      "max_length": "Dit veld heeft een maximale lengte van {maxLength} karakters"
     }
   },
   "routing": {