question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Adding the Yup errors object to the formik errors object

See original GitHub issue

I’m trying to add the Yup errors object to the formik errors object

Here’s the Yup schema

const validationSchema = Yup.object({
        fullName: Yup.string().trim().required('Please type your full name.'),
        email: Yup.string().trim().email('Please enter a valid email address!').required('Please type your valid email address!!')
    }).validate({}, {abortEarly: false}).catch(errors => {
        formik.setErrors({...errors})
    })

Here’s the Formik hook

const formik = useFormik({
        initialValues: {
            fullName: '',
            email: '',
            password: '',
            role: 'employer',
            companyName: '',
            companyWebsite: '',
            phoneNumber: '+971',
            currentJobRole: '',
            companyLogo: '',
            photoProfile: '',
            aboutMe: ''
        }, 
        onSubmit: values => {
            return values
        },
        validationSchema
    })

I was able to add the error object, but once I write something on the input I got this error TypeError: schema[(intermediate value)(intermediate value)(intermediate value)] is not a function

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5

github_iconTop GitHub Comments

73reactions
eyeamkdcommented, Aug 13, 2020

hey @AmineIT, i figured out what my mistake was, I was enclosing the validationSchema in { } while passing that to the formik hook and also I’m now using yup.object().shape({ }). Hope it helps you

0reactions
saeidfiycommented, May 17, 2021

@eyeamkd that work

Read more comments on GitHub >

github_iconTop Results From Across the Web

Validation - Formik
Error messages are dependent on the form's validation. If an error exists, and the validation function produces an error object (as it should)...
Read more >
React Form Validation With Formik And Yup
When the form is submitted, Formik checks if there are any errors in the errors object. If there are, it aborts the submission...
Read more >
Formik errors object is not being updated properly on input
Formik is already handling field change and field blur with the handleChange and handleBlur handlers so it is already making validation checks.
Read more >
Easy Error Handling and Data Validation with Yup - Code Daily
To use yup you can import it piece by piece. Our Formik values are in the shape of an object . So we...
Read more >
ReactJS Form Validation using Formik and Yup
The 4 important states of props object are touched, errors , isSubmitting, values which are more than enough to create highly customized forms...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found