Async validation with Formik, Yup and React

reactjs formik yup
Day's Night picture Day's Night · Apr 23, 2019 · Viewed 11.1k times · Source

I want to make async validation with formik and validationschema with yup but i can't find the example or demo.

Answer

이석규 picture 이석규 · Sep 11, 2019 
const validationSchema = Yup.object().shape({
    username:
        Yup.string()
            .test('checkDuplUsername', 'same name exists', function (value) {
                return new Promise((resolve, reject) => {
                    kn.http({
                        url: `/v1/users/${value}`,
                        method: 'head',
                    }).then(() => {
                        // exists
                        resolve(false)
                    }).catch(() => {
                        // note exists
                        resolve(true)
                    })
                })
            })
})

Yup provides asynchronous processing through the test method.
(kn is my ajax promise function)
have a nice day.

Related questions

Conditional Validation in Yup

I have an email field that only gets shown if a checkbox is selected (boolean value is true). When the form get submitted, I only what this field to be required if the checkbox is checked (boolean is true). This …

Read More
Validation using Yup to check string or number length

Is there a yup function that validates a specific length? I tried .min(5) and .max(5), but I want something that ensures the number is exactly 5 characters (ie, zip code).

Read More
React Formik - Trigger validation only on form submit

I am using Formik in my React Native application. On the login form I have two fields: email and password, both of them are required. I've written such validation rules: export const LoginSchema = Yup.object().shape({ email: Yup.string() .email(…

Read More