Conditional field level validation not working as expected

Are you submitting a bug report or a feature request?

Bug

What is the current behavior?

1. Open codesandbox
2. Click on username field but don’t fill anything in (so the error shows up)
3. Fill in e-mail
4. fill in age (above 18)
5. Toggle required by clicking the button above the form
6. 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.

[timhwang21]

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...
/>

[gustavohenke]

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.