How can I implement async validation in a React form?

How can I implement async validation in a React form?

You can use libraries like Formik or React Hook Form along with async functions to validate inputs. Would you like a code example?

Yes, please provide a code example using React Hook Form.

Sure! Here's a simple example:

import React from 'react';
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')} placeholder='Email' />
      <button type='submit'>Submit</button>
    </form>
  );
};

const validateEmail = async (email) => {
  // Simulate an API call
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(email !== '[email protected]');
    }, 1000);
  });
};

export default MyForm;

What if I want to validate multiple fields asynchronously?

You can create a validation function that checks multiple fields and call it within your onSubmit function. Would you like to see an example?