jaredpalmer / jaredpalmer/formik

Validating depending if the field exists in the DOM

Open
#683 33 comments 11 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.