I am trying to do conditional form validation using Yup But am Unable to Change the value of value "showfile"

Question

I am using formik and Yup to handle by form data and Form Validation in react . I am trying to change the value of "Showfile" to true to do conditional validation But value is not changing.

                             

                                    
                                    TextField
                                    label="Resume"
                                    star="*"
                                    color="red"
                                    name="file"
                                    type="file"
                                    accept=".pdf ,.docx,.doc "
                                    onChange={(event) =>
                                        formik.setFieldValue(
                                            "file",
                                            event.currentTarget.files[0],
                                            "showfile",
                                            true
                                        )
                                    }
                                    value={formik.value}
                                />

file: Yup.mixed().when("showfile", {
            is: true,
            then: Yup.mixed()
                .required("Required")
                .test(
                    "FILE_SIZE",
                    "Uploaded file is too big.",
                    (value) => value && value.size  value && SUPPORTED_FORMATS.includes(value.type)
                ),

Formik
            initialValues={{
                UserName: "",
                email: "",
                Phone: "",
                message: "",
                file: "",
                showfile: false,
                submit: false,
            }}
            validationSchema={validate}
            onSubmit={(values, actions) => {
                setTimeout(() => {
                    console.log(values);
                    actions.setSubmitting(false);
                }, 1000);
            }}
        >

Viet · Accepted Answer · 2021-04-29 15:17:33Z

0

You are using setFieldValue wrong way. It only updates for one field. If you want set 2 filed, you need to call setFieldValue 2 times:

onChange={(event) => {
    formik.setFieldValue("file", event.currentTarget.files[0]);
    formik.setFieldValue("showfile", true);
}}

You can read more about setFieldValue in here: https://formik.org/docs/api/formik#setfieldvalue-field-string-value-any-shouldvalidate-boolean--void

answered Apr 29, 2021 at 15:17

Viet

12.9k2 gold badges18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

shubham sourabh Over a year ago

ok.. that got resolved but now i am getting required error message just after selecting accepted file .... and on clicking other field it is disappearing.....

shubham sourabh Over a year ago

what should be the value of file field... here i have given value={formik.values.file}

Viet Over a year ago

I think you need to add another answer with the detail about your problem. After that, I can take a look and maybe can help you

shubham sourabh Over a year ago

Thank u for your help... that problem got resolved ... I am facing a new problem in validating my file field using Formik and Yup.... I have posted my question here...stackoverflow.com/questions/67323291/…

Collectives™ on Stack Overflow

I am trying to do conditional form validation using Yup But am Unable to Change the value of value "showfile"

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related