Validating depending if the field exists in the DOM

[idesignpixels]

I'm building a quite a complex form which conditionally shows fields inside a field array item based on sibling field values. My question is in redux-form they only validate fields that exist in the DOM but whilst using formik and yup it fails validation even if the field doesn't exist, how to I only validate fields that have been conditionally added? The conditional fields are select fields that only want to be rendered if options are available to them otherwise don't render.

The rough structure is: form --field --field-array ---tabs ----tab-1 -----field ----^conditional field ----^conditional field ----tab-2 -----conditional fields --field

I need to check two things, that tab-1's fields are valid before going to tab-2 and that all fields for a field array item are valid before adding another.

[latviancoder]

Formik has no idea about your dom, so when you hide field from your dom your also have to manually remove the field value from values object (using setValues or setFieldValue).

[idesignpixels]

Sure, but what if the field has no value and is required? Typically you build the schema like all fields exist but when on doesn't it still tries to validate it as having no value.

[jaredpalmer]

When I finish #684, i will add currentFields (or a better name) to the FormikProps. This would include the mounted fields

[idesignpixels]

@jaredpalmer That could be quite handy, My current fix involves having values that aren't field values to validate alongside for example.

cards // array of cards -card --cardColor ---value ---options // array of options for value (dynamically updates, may be 0)

Then use yup when method to set the cardColor>value to be required when cardColor>options are > 0

Currently I'm having to update the options with props into initialValues however this resets the values to the props each time so I have to make a reference to the form values (this.latestValues = values;) then in initialValues do {...this.latestValues, cards: props.cards}

I'm hoping #522 may help as I could replace these helper values with contexts however it appears yup has no concept of an array index when validating so I can't tailor validation based on index position.

I also saw an issue somewhere talking about an initialValuesChange handler which may also help.

[Andreyco]

You can solve this right away by moving validation from form level to field level

[stale[bot]]

Hola! So here's the deal, between open source and my day job and life and what not, I have a lot to manage, so I use a GitHub bot to automate a few things here and there. This particular GitHub bot is going to mark this as stale because it has not had recent activity for a while. It will be closed if no further activity occurs in a few days. Do not take this personally--seriously--this is a completely automated action. If this is a mistake, just make a comment, DM me, send a carrier pidgeon, or a smoke signal.

[stale[bot]]

ProBot automatically closed this due to inactivity. Holler if this is a mistake, and we'll re-open it.

[davemooreuws]

@jaredpalmer Are there plans to merge currentFields or what ever you would like to call it in as per your post on Jun 13?

[idoo]

@jaredpalmer yep, currentFields will solve my pain, any chance to get it soon?

[shoutcool]

Would be great if this issue could be fixed. I'm facing the exactly same problem and there is no proper solution. currentFields Props would be very handy for this case.

[idoo]

@shoutcool I added currentFields manually in my form props and it works well, but yep it should be in formik in my opinion.

[mouhsnimohamed]

I'm facing the same issue! was this problem resolved?

[idoo]

@mouhsnimohamed still exist. So, feel free to add PR ;)

@jaredpalmer could we reopen the issue?

[milkysingh]

Has anyone been able to solve this? I have a similar issue in which I am showing a couple of form fields depending on the checkbox selected/unselected and I want validation on the fields when they appear and no validation when fields dissappears. @jaredpalmer

[Ciaran0]

Coming across the same problem here, current fields would be very useful.

[hegelstad]

This would be very powerful in tandem with the validationSchema prop. Is this being worked on?

[harshane]

I am still facing this issue, was anyone able to get around this?

[MEsteves22]

Did someone solve this issue? I am unfortunately having the same problem :/

[hrushilok]

I am facing same issue. Has anyone have any workaround for this?

[brycefranzen]

I'm also still having the same issue. I would like to trigger fieldValidation on all mounted fields when i click "next step" in my form.

[brycefranzen]

@shoutcool I added currentFields manually in my form props and it works well, but yep it should be in formik in my opinion.

How did you do that?

[Senelith]

I need this so badly in my project. Is there a workaround to achieve this ?

[rus-yurchenko]

Same here, the Formik shouldn't trigger validation on conditional fields unless they were mounted to the DOM and should remove conditional field entry when a field gets unmounted.

[kostiantyn-solianyk]

@jaredpalmer so, any updates on this? It's 2020, but still exist.

[juanrouges]

I end the up here for the same reason. I have a field that its required but in some cases its hidden. Is this something formik handles now? or is there a work around?

Just trying a stab in the dark since I see a bunch of other comments with no answer.

[amidulanjana]

I am also having this issue. Any workaround for this ?

[kostiantyn-solianyk]

I think for now we can only dynamically change validation schema depending on visible/hidden fields

[k3nda]

Hi there, any update please? This is really crucial thing, which should be implemented in Formik.

[Hajzenberg]

This would really help.

[mg-83]

Have this issue too

[vipul261]

@idesignpixels and others who are facing this issue, what helped me solve this conditional validation is modifying my Yup validation schema and adding dependency logic in it. In my case I wanted to show some of the fields only when a parent field has a certain value. For that I wrapped my original field validation schema as show below:

dependentField: Yup.mixed().when("<PARENT_FIELD_ID>", {
            is: value => value && value.length > 0, // CHECK IF YOU NEED TO VALIDATE THE CURRENT FIELD
            then: <PASS_ORIGINAL_SCHEMA>
            otherwise: Yup.mixed() // No validation
        })

Refer this: https://github.com/jquense/yup/issues/736

I hope this helps

[emrahaydemir]

Hello my friend who has this problem. A very simple solution to this problem is $exist. Here is an example for you:

repeatPassword: yup.string().when("$exist", {
    is: (exist) => exist, //if(exist)
    then: yup.string().required("Password repeat is required!), //true
    otherwise: yup.string(), //false
  }),