If the onSubmit function from react-hook-form is not working when using yup with your React form, there could be a few reasons for this issue. Here are some common causes and their potential solutions:

  1. Validation Errors Not Displayed or Blocking Submission:

    • If there are validation errors in your form, react-hook-form might prevent the form submission until all the validation errors are resolved.
    • Check your form fields and validation rules defined with yup to ensure they are correctly configured.
    • Make sure you are displaying validation error messages for each field using the errors and message properties from react-hook-form.
  2. Asynchronous Validation:

    • If your form contains asynchronous validation using yup, it might be causing the issue.
    • Ensure that your asynchronous validation functions return a promise and properly resolve or reject the promise based on the validation results.
    • If using custom async validation, make sure to use the watch and setError methods from react-hook-form to handle the validation.
  3. yup and react-hook-form Version Compatibility:

    • Make sure that you are using compatible versions of yup and react-hook-form.
    • Check the official documentation of both libraries to verify their compatibility, as breaking changes can sometimes occur with version updates.
  4. validateSchema Prop:

    • If you are using the useForm hook with the validateSchema prop to define your schema using yup, ensure that you have provided it correctly. It should look something like this:
    const { handleSubmit, register, formState: { errors } } = useForm({ resolver: yupResolver(yourYupSchema), });
  5. yupResolver Not Imported:

    • Ensure you have imported yupResolver from @hookform/resolvers/yup and are using it correctly with the useForm hook.
    import { useForm } from 'react-hook-form'; import { yupResolver } from '@hookform/resolvers/yup'; import * as yup from 'yup'; // Define your yup schema const yourYupSchema = yup.object().shape({ // ...your schema rules here }); // In your component const { handleSubmit, register, formState: { errors } } = useForm({ resolver: yupResolver(yourYupSchema), });
  6. yup Schema is not Returning Errors Object:

    • Double-check your yup schema definition to ensure that it is correctly returning an object containing errors when validation fails.
    • Use yup's validate or validateSync methods to validate your data and return an object with error messages.
  7. Submit Button Handling:

    • Make sure your submit button is correctly handling the handleSubmit function from react-hook-form.
    • For example, in your JSX, ensure you are using the onSubmit prop of the <form> element or the onClick prop of the submit button to trigger the handleSubmit function.

If you have checked all of the above and still encounter issues, consider sharing relevant parts of your code to help diagnose the problem more effectively. Additionally, refer to the official documentation of react-hook-form and yup for the latest guidelines and examples.

Have questions or queries?
Get in Touch