How can I implement async validation in React Hook Form?

How can I implement async validation in React Hook Form?

You can implement async validation in React Hook Form by using the validate option in the register method. You can pass a function that returns a promise.

Can you show me a code example?

Sure! Here's a simple example:

import { useForm } from 'react-hook-form';

const MyForm = () => {
  const { register, handleSubmit, setError } = useForm();

  const onSubmit = async (data) => {
    const isValid = await validateEmail(data.email);
    if (!isValid) {
      setError('email', { type: 'manual', message: 'Email is already taken' });
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email', { validate: validateEmail })} />
      <button type="submit">Submit</button>
    </form>
  );
};

const validateEmail = async (email) => {
  // Simulate an API call
  const response = await fetch(`/api/check-email?email=${email}`);
  const data = await response.json();
  return data.isAvailable;
};

This code checks if the email is available asynchronously.

What if I want to validate multiple fields asynchronously?

You can validate multiple fields by creating separate async validation functions for each field and using them in the register method. You can also combine them in the onSubmit function.