How can I implement async validation in Redux Forms?

How can I implement async validation in Redux Forms?

To implement async validation in Redux Forms, you can use a validation function that returns a promise. This function can check the validity of the input against an API or any asynchronous source.

Can you show me a code example?

Sure! Here's a simple example:

const validate = (values) => {
  const errors = {};
  if (!values.email) {
    errors.email = 'Required';
  } else if (!/\S+@\S+\.\S+/.test(values.email)) {
    errors.email = 'Invalid email address';
  }
  return new Promise((resolve) => {
    setTimeout(() => {
      if (values.email === '[email protected]') {
        errors.email = 'Email already taken';
      }
      resolve(errors);
    }, 1000);
  });
};

This function checks if the email is valid and simulates an API call to check if the email is already taken.

What if I want to validate multiple fields asynchronously?

You can return an object with promises for each field. Here's an example:

const validate = (values) => {
  const errors = {};
  const promises = [];

  if (!values.email) {
    errors.email = 'Required';
  } else {
    promises.push(new Promise((resolve) => {
      setTimeout(() => {
        if (values.email === '[email protected]') {
          errors.email = 'Email already taken';
        }
        resolve();
      }, 1000);
    }));
  }

  if (!values.username) {
    errors.username = 'Required';
  } else {
    promises.push(new Promise((resolve) => {
      setTimeout(() => {
        if (values.username === 'admin') {
          errors.username = 'Username not allowed';
        }
        resolve();
      }, 1000);
    }));
  }

  return Promise.all(promises).then(() => errors);
};

This way, you can validate multiple fields asynchronously.