validateOnChange, validateOnBlur allow more complex interactions

[ybrodsky]

Feature request

Current Behavior

Currently you define this properties when creating the form, either with the Component or with the hook. Afterwards you have no way of changing this options.

Desired Behavior

In a real case scenario, I don't care to validate the whole form as the user types in the first input. But after the user attempted to submit the form and everything lighted up with errors, if he goes back to an input with an error I do care to validate as he types.

Suggested Solution

Instead of just allowing for boolean in those two options, allow us to provide a function. This function get's called passing all of the formik's props (similarly to the submit prop that gets called with (values, formikProps)

  validateOnChange: (formikProps) => formikProps.submitCount > 0,
  validateOnBlur: (formikProps) => formikProps.submitCount > 0 && !formikProps.isValid

Who does this impact? Who is this for?

I think everybody as I believe what I described is the validation behavior you see in most of the internet

Describe alternatives you've considered

I did hacks to achieve this, overwriting the formik functions handleChange handleBlur but this is quite nasty.

[italodeandra]

Nice feature suggestion. I'm going to use this issue to suggest another thing that might be possible.

Debouncing the validationOnChange: true because some forms with more than 4 inputs gets really slow with this configuration if you keep pressing a key (or type really fast you can also notice).

[ybrodsky]

I have noticed that, yea. I believe that even when you have validateOnChange the only input that should be validated is the one that's changing. But yea might be a good oportunity to allow more complex interactions / configurations to the validation process, beyond 3 boolean props.

[joshuabaker]

A better API would be preferred here for sure. I run into this every time I use Formik.

A simple solution to this is to override the error message component and add an early return if the formikContext.submitCount is zero.

export default function MyErrorMessage(props) {
  const { submitCount } = useFormikContext();

  if (submitCount === 0) {
    return null;
  }

  return <ErrorMessage {...props} />
}