How to validate with Dynamic Stepper Form

[rcronin]

Hello,

We have a form that is utilizing the stepper component. On the first step, based on the value, it allows additional steps to be enabled or disabled. This also changes the object structure of the form too. Is it possible to change the validate function based on what steps are enabled or disabled? Ideally we want to avoid a scenario where we have a massive validation function that has a bunch of if statements to detect if a certain component/step is active.

[rtivital]

https://mantine.dev/form/recipes/#form-with-multiple-steps

[rcronin]

This is what we based it off of. What we're trying to avoid is this section:

validate: (values) => {
      if (active === 0) {
        return {
          username:
            values.username.trim().length < 6
              ? 'Username must include at least 6 characters'
              : null,
          password:
            values.password.length < 6 ? 'Password must include at least 6 characters' : null,
        };
      }

      if (active === 1) {
        return {
          name: values.name.trim().length < 2 ? 'Name must include at least 2 characters' : null,
          email: /^\S+@\S+$/.test(values.email) ? null : 'Invalid email',
        };
      }

      return {};
    },

Is there way in the body of this function to abstract the active step to a validate function associated with that step?

[rtivital]

No, I cannot think of doing it any other way

[guy-ecton]

A hybrid approach would be nice:

{
  validate: {
   field1: isNotEmpty,
   field2: (values) => {
    nested1: cond(values.nested2) ? 'Some Error' : null,
    nested2: cond(values.nested1) ? 'Another error' : null
   }
  }
}