Asynchronous validation in use-form hook

[ChapterSevenSeeds]

I think that an option to perform asynchronous form validation would be great. Consider the following Electron code.

export default function App() {
    const theme = useMantineTheme();

    const form = useForm<{ file: string }>({
        validate: zodResolver(z.object({
            file: z.string().refine(async (path: string) => await window.api.fileExists(path), "File doesn't exist.")
        })),
        initialValues: {
            file: ""
        },
        validateInputOnChange: true
    });

    return (
        <form onSubmit={form.onSubmit(values => {
            console.log(values);
        })}
        >
            <TextInput
                label="Default Connect Path"
                {...form.getInputProps("file")}
            />
            <Button variant='default' type="submit">Save</Button>
        </form >
    );
}

Typing a value in the TextInput crashes the window with a Zod error saying, "Async refinement encountered during synchronous parse operation. Use .parseAsync instead."

Is this a reasonable feature to request?

[rtivital]

Mantine form does not current support async validation. This feature is in the backlog.

[ryuhangyeong]

Is this feature still not supported?

[gius]

Do you have any recommendations on how to properly implement async validation?
Typical problems:

• blocking submit while validation is in process
• reacting to validation result (manually setting error or even manipulating form values) with the actual form instance (instead of the one caught in a closure when the handler was originally called)

[lukepighetti]

Checking in on this one. Definite need for us. New to the ecosystem though so if anyone has a recommendation for a package or pattern to use to backfill this functionality I'm all ears

[gius]

I would try https://tanstack.com/form/latest

[ivosabev]

Any progress on this?

[ryuhangyeong]

It looks like there have been improvements to form in 7.8. Async validation is also a very common use case, so I really hope Mantine supports it.

[Gus007-BR]

This is a huge bummer... I was so happy with the use-form hook... I hope this gets addressed soon. In the meantime, please let us know if you happen to know of any good workarounds.

[ryuhangyeong]

https://mantine.dev/changelog/7-9-0/#use-field-hook

[ivosabev]

Why was it not implemented on the form level as well?

[martinestiga]

Any news about this?? This functionality is really necessary.

[ryuhangyeong]

use-field

https://mantine.dev/form/use-field/

[dmgauthier]

Please consider this basic functionnality at the form level.
A dev in our team had to do a frankeinstein between Mantine and React Hook Form to implement async validation. 🧟

[rtivital]

How do you perform validation? Is it entirely on the backend or only some fields are validated on backend? Why do you not validate inside onSubmit handler? What features/API do you expect from async validation?

[ryuhangyeong]

@rtivital

maybe here

// @example
const form = useForm({
  mode: 'uncontrolled',
  initialValues: {
    email: '',
    termsOfService: false,
  },

  validate: {
    // Enable asynchronous processing in the validate function
    email: async(value) => {
      // @example
      await mockApi();
      
      return null
    }
  },
});

[ryuhangyeong]

// @example
const rules = {
  number: [
    { required: true, message: 'error', trigger: 'blur' },
    {
      validator: async (_, value, callback) => {
        const data = await mockApi();
        return callback(data);
      },
      trigger: 'blur',
    },
  ],
}

https://github.com/yiminghe/async-validator

[dmgauthier]

TLDR:

What features/API do you expect from async validation?

zod superRefine

Long story short,
Even though we DO have a backend that validates. (We wired up the mantine notification system on a custom client handling errors to show a toast when we end up with a throw there)
We try to validate before sending stuff to the API with zod. And this is precisely in the zod superRefine. E.G. making a call with filter to check if a resource name is duplicated.
Having a mixed up implementation between async stuff in onBlur listener+custom validation and our stronger shema base validation is not better than having a RHF frankeinstein IMHO

[martinestiga]

In my case, like @dmgauthier , it's to validate if the email of the user that is being created already exists or not.