Create custom react hook form validation

Medium

Fill in the missing code to create a custom React hook that manages form validation with dynamic rules:

Choose an option below

const validateValues = async (values) => {
  const errors = {};
  for (const [key, value] of Object.entries(values)) {
    if (validationSchema[key]) {
      const error = validationSchema[key](value);
      if (error) errors[key] = error;
    }
  }
  return errors;
};

const validateValues = async (values) => {
  try {
    await validationSchema.validate(values, { abortEarly: false });
    return {};
  } catch (err) {
    return err.inner.reduce((acc, err) => ({
      ...acc,
      [err.path]: err.message
    }), {});
  }
};

const validateValues = async (values) => {
  const errors = {};
  Object.keys(validationSchema).forEach(key => {
    if (!values[key]) errors[key] = 'Required';
  });
  return Promise.resolve(errors);
};

const validateValues = async (values) => {
  const errors = {};
  Object.keys(validationSchema).forEach(key => {
    if (!values[key]) errors[key] = 'Required';
  });
  return Promise.resolve(errors);
};

ReactReact hooksForm validationCustom hooksError handling

1function useFormValidation(initialValues, validationSchema) {
const [values, setValues] = useState(initialValues);
const [errors, setErrors] = useState({});
const [isSubmitting, setIsSubmitting] = useState(false);
5
// Missing validation logic here

const handleChange = (event) => {
  const { name, value } = event.target;
  setValues(prev => ({
    ...prev,
    [name]: value
  }));
};
15
const handleSubmit = async (onSubmit) => {
  setIsSubmitting(true);
  const validationErrors = await validateValues(values);
  setErrors(validationErrors);
  
  if (Object.keys(validationErrors).length === 0) {
    await onSubmit(values);
  }
  setIsSubmitting(false);
};
26
return { values, errors, isSubmitting, handleChange, handleSubmit };
28}

Fill in the missing code to create a custom React hook that manages form validation with dynamic rules:

Hint