Multistep recipe does not work with nested fields

[VaZark]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.8.0

What package has an issue?

@mantine/core

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

Firefox

Describe the bug

According to the docs,

1. Using nested fields as mentioned below works

 validate: {
    user: {
      name: (value) =>
        value.length < 2 ? 'Name is too short' : null,
      occupation: (value) =>
        value.length < 2 ? 'Occupation is too short' : null,
    },
  },

2. Using multiple steps to return partial validations works too

 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 {};
    },
  });

However, mixing the two sets hasErrors to be true as the return of validate function returns an object.

//Example
    validate: (values) => {
      console.log(active, values);
        if (active === 0) {
        return {
          login: {
            username: values.login.username
              ? null
              : "Username must include at least 6 characters",
            password: values.login.password
              ? null
              : "Password must include at least 6 characters",
          },
        };
      }

      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 {};
    },
  });

Response of the validate is

{
  "hasErrors": true,
  "errors": {
    "login": {
      "username": null,
      "password": null
    }
  }
}

If possible, include a link to a codesandbox with a minimal reproduction

https://codesandbox.io/p/sandbox/mantine-react-template-forked-l8hl8k

Possible fix

Maybe verify and step through the object when the return of the validate function is a partial of the initialValues?

Self-service

• I would be willing to implement a fix for this issue

[rtivital]

validate function must return an object of errors where key is path to the field and value is error message. In your example, errors are represented as objects, this is not how form works.

[vilola]

I found a solution for the validate object when used with multistep form. Just create

const validateObj = useMemo(() => {
  switch (currentStep) {
    case 0:
      return {
        name: isNotEmpty(...),
        ...
      }
    case 1:
      return {...}
    default:
      ...
  }
}, [currentStep])

And use it in a useForm validate and it works.