fix: validation

components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx

@@ -15,9 +15,9 @@ import {
   ChildInfoSelectorProps,
 } from "@/types/components/bookingWidget/guestsRoomsPicker"
 
-const ageList = Array.from(Array(13).keys()).map((age) => ({
-  label: age.toString(),
-  value: age,
+const ageList = [...Array(13)].map((_, i) => ({
+  label: i.toString(),
+  value: i,
 }))
 
 export default function ChildInfoSelector({
@@ -27,22 +27,23 @@ export default function ChildInfoSelector({
   index = 0,
   roomIndex = 0,
 }: ChildInfoSelectorProps) {
+  const ageFieldName = `rooms.${roomIndex}.child.${index}.age`
+  const bedFieldName = `rooms.${roomIndex}.child.${index}.bed`
   const intl = useIntl()
   const ageLabel = intl.formatMessage({ id: "Age" })
-  const ageReqdErrMsg = intl.formatMessage({ id: "Child age is required" })
   const bedLabel = intl.formatMessage({ id: "Bed" })
-  const { setValue, formState } = useFormContext()
-
-  function updateSelectedAge(age: number) {
-    setValue(`rooms.${roomIndex}.child.${index}.age`, age, {
-      shouldValidate: true,
-    })
-    const availableBedTypes = getAvailableBeds(age)
-    updateSelectedBed(availableBedTypes[0].value)
-  }
+  const errorMessage = intl.formatMessage({ id: "Child age is required" })
+  const { setValue, formState, register, trigger } = useFormContext()
 
   function updateSelectedBed(bed: number) {
     setValue(`rooms.${roomIndex}.child.${index}.bed`, bed)
+    trigger()
+  }
+
+  function updateSelectedAge(age: number) {
+    setValue(`rooms.${roomIndex}.child.${index}.age`, age)
+    const availableBedTypes = getAvailableBeds(age)
+    updateSelectedBed(availableBedTypes[0].value)
   }
 
   const allBedTypes: ChildBed[] = [
@@ -76,6 +77,10 @@ export default function ChildInfoSelector({
 
   //@ts-expect-error: formState is typed with FormValues
   const roomErrors = formState.errors.rooms?.[roomIndex]?.child?.[index]
+
+  const ageError = roomErrors?.age
+  const bedError = roomErrors?.bed
+
   return (
     <>
       <div key={index} className={styles.childInfoContainer}>
@@ -89,13 +94,15 @@ export default function ChildInfoSelector({
             onSelect={(key) => {
               updateSelectedAge(key as number)
             }}
-            name={`rooms.${roomIndex}.child.${index}.age`}
             placeholder={ageLabel}
             maxHeight={150}
+            {...register(ageFieldName, {
+              required: true,
+            })}
           />
         </div>
         <div>
-          {child.age !== -1 ? (
+          {child.age >= 0 ? (
             <Select
               items={getAvailableBeds(child.age)}
               label={bedLabel}
@@ -104,17 +111,26 @@ export default function ChildInfoSelector({
               onSelect={(key) => {
                 updateSelectedBed(key as number)
               }}
-              name={`rooms.${roomIndex}.child.${index}.age`}
               placeholder={bedLabel}
+              {...register(bedFieldName, {
+                required: true,
+              })}
             />
           ) : null}
         </div>
       </div>
 
-      {roomErrors ? (
+      {roomErrors && roomErrors.message ? (
         <Caption color="red" className={styles.error}>
           <ErrorCircleIcon color="red" />
-          {ageReqdErrMsg}
+          {roomErrors.message}
+        </Caption>
+      ) : null}
+
+      {ageError || bedError ? (
+        <Caption color="red" className={styles.error}>
+          <ErrorCircleIcon color="red" />
+          {errorMessage}
         </Caption>
       ) : null}
     </>

components/GuestsRoomsPicker/ChildSelector/index.tsx

@@ -10,7 +10,6 @@ import ChildInfoSelector from "./ChildInfoSelector"
 
 import styles from "./child-selector.module.css"
 
-import { BookingWidgetSchema } from "@/types/components/bookingWidget"
 import { SelectorProps } from "@/types/components/bookingWidget/guestsRoomsPicker"
 
 export default function ChildSelector({
@@ -21,26 +20,20 @@ export default function ChildSelector({
 }: SelectorProps) {
   const intl = useIntl()
   const childrenLabel = intl.formatMessage({ id: "Children" })
-  const { setValue } = useFormContext<BookingWidgetSchema>()
+  const { setValue } = useFormContext()
 
   function increaseChildrenCount(roomIndex: number) {
     if (currentChildren.length < 5) {
-      setValue(
-        `rooms.${roomIndex}.child.${currentChildren.length}`,
-        {
-          age: -1,
-          bed: -1,
-        },
-        { shouldValidate: true }
-      )
+      setValue(`rooms.${roomIndex}.child.${currentChildren.length}`, {
+        age: undefined,
+        bed: undefined,
+      })
     }
   }
   function decreaseChildrenCount(roomIndex: number) {
     if (currentChildren.length > 0) {
       currentChildren.pop()
-      setValue(`rooms.${roomIndex}.child`, currentChildren, {
-        shouldValidate: true,
-      })
+      setValue(`rooms.${roomIndex}.child`, currentChildren)
     }
   }