Trigger validation on both onChange and onBlur

Feature request

What is the current behavior?

If true, validation will happen on blur. If false, validation will happen on change. Defaults to false.

What is the expected behavior?

I would suggest adding another config option; validateOnChange: bool validateOnBlur: bool

Other information

I’m considering abandoning my own attempt at a form library (it was a great learning experience though), since you certainly know more about the different pain points users have, and the internal workings of React and how to properly do performant libraries, considering your background with forms and React.

One thing I really liked with my solution was the ability to do sync validation onChange, and async (i.e network requests) on onBlur.

I haven’t figured out another way to do this just yet. But If we can have the library to validate on both onChange and onBlur this would be possible.

[Dakkers]

A possibly related behaviour I quite like is having “onBlur” validation initially, and after the initial blur, validation is done onChange.

[czabaj]

I encountered a very similar issue today and I think I found an almost ideal solution.

At first, the documentation for Field validate caught my attention - it passes field meta as a 3rd argument, thus we can detect in our field validator if we validate on blur or on change – the meta.active is true during onChange validation and false during onBlur. Note, that Form validatate receives only the values parameter, thus is unable to detect which validation we are in, but I favor Field validation in all cases as it is more declarative, simpler, and easier to maintain.

But now, how to trigger validation on the change as well as on blur? We could simply leave the Form validateOnBlur property untouched, thus our validate function will run on change only, then write some of our validators to skip validation, when the field is in meta.active and then rerun the validation onBlur.

Well, it turns out, triggering the validation is another nut to crack! Unfortunately, I did not found a public API for triggering a validation, but I dig into the source code and found the mighty runValidation function, which is not exported but is triggered by change, which we can control, so I created a simple mutator which, when called, “changes” the value of the specified field, to the same, unchanged value – it fakes “change” to just trigger validation.

And, with all these little components, we are able to run some validations on change and some validation on blur.

Check the CodeSandbox and note the beautiful validator composition, which runs my async validator onBlur only when all synchronous validator passes, whilst synchronous validators are run on every change. https://codesandbox.io/s/trigger-validation-onblur-mx7vx

NOTE: the example is forked from another example and a little bit complicated than necessary, but the important part shall be clear. The fundamental parts are triggerValidation mutator and an async field-level validation function that tests meta.active.