redux-form: Conditional field level validation not working as expected

Are you submitting a bug report or a feature request?

Bug

What is the current behavior?

Open codesandbox
Click on username field but don’t fill anything in (so the error shows up)
Fill in e-mail
fill in age (above 18)
Toggle required by clicking the button above the form
Try to submit the form

What is the expected behavior?

Expected is that after toggling the required off, the field that currently has the error (the username) should update itself and be valid as the validate prop now returns undefined.

Now it is required to touch the field again which is not a good user experience and in my case breaks the possibility to submit the form (see other information)

Sandbox Link

(I’ve used the codesandbox example of Field-Level Validation) https://codesandbox.io/s/8ZwVQ2Zr

What’s your environment?

(unchanged from codesandbox) react 15.5.3 react-dom 15.5.3 react-redux 5.0.4 redux 3.6.0 redux-form 6.6.3 redux-form-website-template 0.0.41

Other information

This is needed when performing field level validation which is based on other factors. In my form (other project) the field also get’s an overlay which is semitransparent (but blocks the user from touching the field).

The error is keeping them from submitting because the error persists even though the field is not mandatory anymore.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 1
Comments: 18 (5 by maintainers)

Commits related to this issue

Handle changes to Field validate/warn props This will ensure that changes to these functions are reflected in form validation. Achieved by re-registing the Field with reduxForm when new validate or w... — committed to dmanningnz/redux-form by deleted user 7 years ago
Handle changes to Field validate/warn props (#3094) This will ensure that changes to these functions are reflected in form validation. Achieved by re-registing the Field with reduxForm when new val... — committed to redux-form/redux-form by dmanningnz 7 years ago

Most upvoted comments

I agree that creating separate functions is the better approach, but this change also means that arrays of rules have to be defined separately. To me that’s where it crosses the line between DRY and unwieldy 😄

For what it’s worth, we’ve solved this exact problem by sidestepping the need to change rules entirely. We did this by making our rules composable, and defining higher-order “conditional” rules. For example:

// generic higher order rule to apply validation conditionally
const applyIf = condition => rule => (value, allValues) => 
  condition(value, allValues) && rule(value, allValues);

// some validation
const hatesBob = (value, allValues) => 
  value === 'Bob' && 'Go away, Bob';
}

// will error on name === 'Bob' if blockBob (maybe some toggle switch) is true
// the validation function itself doesn't need to change!
<Field
  name="name"
  component="input"
  validation={applyIf((value, allValues) => allValues.blockBob === true)(hatesBob)}
/>
<Field
  name="blockBob"
  component="toggle" // just run with it here...
/>

timhwang21 on Aug 5, 2017

To me, it seems like a legit bug. Would you like to try fixing this? Feel free to go ahead and send us a PR 😉 If @erikras or I find a better way to fix it then the way you suggested, we can discuss in the PR.

gustavohenke on Jun 6, 2017

@duro @PavelPolyakov Oh, I’m glad that I’m not the only one here!

Here gist with workaround that i used to migrate to redux-form@7.

Perhaps you can put forward some ideas/a PR on some possible ways to have the best of both worlds?

I have some thoughts on this 🤔.

avocadowastaken on Aug 5, 2017

@umidbekkarimov I too am sad. I’m still trying to figure out how to allow for error message definition in line to the field. cc: @erikras

I reported that this kind of approach broke in #3288 but was told it’s a feature. Bummer.

duro on Aug 4, 2017

Fix published in v7.0.0.

erikras on Jul 11, 2017