jaredpalmer / jaredpalmer/formik
Validating depending if the field exists in the DOM
- Dominant language
- TypeScript
- Stars
- 34.3k
- Forks
- 2.8k
- PR merge metrics
- No merged PRs in 30d
Description
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.
Contributor guide
Research direction
No source file, test, or entry point is named. Start by reproducing the conditional field-array scenario described in the issue and trace how Formik handles fields absent from the DOM. Done should be a clearly specified validation behavior for tab and array-item fields, with coverage for conditionally rendered selects.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100