How to validate with zod passing if the mapped object is required.

[Joseamica]

Hello, im working right now with modifiers and modifierGroups for my restaurant

I'm working on a web application where I have multiple modifierGroups in a form. Each modifierGroup contains checkboxes that could either be required or optional. The requirement is determined by the min attribute of each modifierGroup: if the min value is greater than 0, then the checkboxes in that group should be required.

My issue is that, even though the min attributes indicate that checkboxes from both modifierGroups should be required, the form allows submission if I select checkboxes from only one modifierGroup.

In essence, how can I dynamically enforce that the correct number of checkboxes are selected in each modifierGroup based on their respective min values before allowing form submission?

const productIdSchema = z.object({
  modifier: z.array(z.string()).nonempty('You must select at least 1'),
  productId: z.string(),
  quantity: z.number().min(1).max(10),
  shareDish: z.array(z.string()).optional(),
  sendComments: z.string().optional(),
})

  const [form, fields] = useForm({
    id: 'productId',
    constraint: getFieldsetConstraint(productIdSchema),
    lastSubmission: fetcher.data?.submission,

    onValidate({ formData }) {
      return parse(formData, { schema: productIdSchema })
    },
    shouldRevalidate: 'onBlur',
  })

               <div className="flex flex-col space-y-2">
                  {conform
                    .collection(fields.modifier, {
                      type: 'checkbox',
                      options: modifierGroup.modifiers.map((modifier: Modifiers) => {
                        return modifier.id
                      }),
                    })
                    .map((props, index) => {
                      const correspondingModifier = modifierGroup.modifiers.find((modifier: Modifiers) => modifier.id === props.value)
                      console.log(modifierGroup.min)
                      // Safeguard in case correspondingModifier is undefined
                      if (!correspondingModifier) {
                        return null
                      }

                      return (
                        <label htmlFor={props.id} key={index} className="flex flex-row space-x-3 text-sm justify-between items-center">
                          <FlexRow>
                            <input required={modifierGroup.min > 0} {...props} />
                            <H5>{correspondingModifier.name}</H5>
                          </FlexRow>
                          <H5 className="place-content-end">{formatCurrency(data.currency, Number(correspondingModifier.extraPrice))}</H5>
                        </label>
                      )
                    })}
                  <ErrorList errors={[fields.modifier.error]} />
                </div>

[edmundhung]

You will need to adjust your schema based on the modifierGroup in this case. Assuming the config comes from the loader, you can prepare a schema creator that is reused on both the component and the action:

function createSchema(modifierGroup) {
  return z.object({
    modifier: z
      .array(z.string())
      .min(modifierGroup.min, `You must select at least ${modifierGroup.min}`),
    productId: z.string(),
    quantity: z.number().min(1).max(10),
    shareDish: z.array(z.string()).optional(),
    sendComments: z.string().optional(),
  })
}

// In the component
const productIdSchema = createSchema(modifierGroup);
const [form, fields] = useForm({
  id: 'productId',
  constraint: getFieldsetConstraint(productIdSchema),
  lastSubmission: fetcher.data?.submission,

  onValidate({ formData }) {
    return parse(formData, { schema: productIdSchema })
  },
  shouldRevalidate: 'onBlur',
})

// In the action
const modifierGroup = getModifierGroup(...) // Similar to how you get it on the loader
const productIdSchema = createSchema(modifierGroup);
const submission = parse(formData, { schema: productIdSchema });

[Joseamica]

Thanks for the response, it's very helpful but there is any way I can validate on the client side? How do I pass the modifierGroup to the createSchema since to get the modifierGroup individually I need to map through.

[Joseamica]

Testing your solution, i dont get any validation, it might be because the data from modifierGroup its like this:

[
    {
        "id": "clm6wtbkc001cceinrpt264n3",
        "name": "Salsas",
        "plu": "SALSA-01",
        "max": 3,
        "min": 1,
        "multiMax": 0,
        "multiply": 1,
        "cartItemId": null,
        "adminId": "cllb3d9b90003cedclcthud41",
        "updatedAt": "2023-09-05T22:56:10.188Z",
        "createdAt": "2023-09-05T22:56:10.188Z",
        "modifiers": [
            {
                "id": "clm6wtbke001eceinltnh11it",
                "name": "Salsa Verde",
                "plu": null,
                "max": 0,
                "min": 0,
                "multiply": 0,
                "extraPrice": "4",
                "modifierGroupId": "clm6wtbkc001cceinrpt264n3",
                "cartItemId": null,
                "adminId": "cllb3d9b90003cedclcthud41"
            },
            {
                "id": "clm6wtbke001hceinbipm3xk7",
                "name": "Salsa Habanero",
                "plu": null,
                "max": 0,
                "min": 0,
                "multiply": 0,
                "extraPrice": "20",
                "modifierGroupId": "clm6wtbkc001cceinrpt264n3",
                "cartItemId": null,
                "adminId": "cllb3d9b90003cedclcthud41"
            },
            {
                "id": "clm6wtbke001iceine9dsisdo",
                "name": "Salsa Roja",
                "plu": null,
                "max": 0,
                "min": 0,
                "multiply": 0,
                "extraPrice": "7",
                "modifierGroupId": "clm6wtbkc001cceinrpt264n3",
                "cartItemId": null,
                "adminId": "cllb3d9b90003cedclcthud41"
            }
        ]
    },
    {
        "id": "clm71hx960004ceg3y4xd6dfg",
        "name": "Sugar",
        "plu": null,
        "max": 99,
        "min": 1,
        "multiMax": 0,
        "multiply": 0,
        "cartItemId": null,
        "adminId": "cllb3d9b90003cedclcthud41",
        "updatedAt": "2023-09-06T01:06:56.692Z",
        "createdAt": "2023-09-06T01:07:16.506Z",
        "modifiers": [
            {
                "id": "clm71i5ha0006ceg3vu99b7u5",
                "name": "Stevia",
                "plu": null,
                "max": 0,
                "min": 0,
                "multiply": 0,
                "extraPrice": "2",
                "modifierGroupId": "clm71hx960004ceg3y4xd6dfg",
                "cartItemId": null,
                "adminId": "cllb3d9b90003cedclcthud41"
            },
            {
                "id": "clm71idjd0008ceg3kt4886jd",
                "name": "Monk Fruit",
                "plu": null,
                "max": 0,
                "min": 0,
                "multiply": 0,
                "extraPrice": "3",
                "modifierGroupId": "clm71hx960004ceg3y4xd6dfg",
                "cartItemId": null,
                "adminId": "cllb3d9b90003cedclcthud41"
            }
        ]
    }
]

[edmundhung]

You will need to adjust the code according to your actual schema and data structure in this case 😅 I can take a deeper look if you can share a repository or a codesandbox.