Add onChangeBlurred validation

[cjoecker]

I think the best UX for field validations is onBlur first and onChange once the field has been touched.
This gives the user instant feedback once the field is touched and avoids annoying messages while the first input is being typed.

With the current onBlur and onChange validation methods in Tanstack Form, the only way I found to do that is by having an onChange validation and showing the error only if the field has the isBlurred property = true. The problem with that approach is that when the user clicks submit, the errors are not shown in the field since the isBlurred is not set to true.

Therefore, it will be nice to have something like a onChangeBlurred in the form hook to have this behaviour out of the box.

Current UX

Better UX

[matthewbbrandt]

The approach I have used is to validate with onChange, but show errors based on blur or if user has attempted to submit the form. Something like:

const submissionAttempted = useStore(field.form.store, state => state.submissionAttempts > 0)

// now, conditionally render any errors
{(field.state.meta.isBlurred || submissionAttempted) && (
          <em>{field.state.meta.errors.join(',')}</em>
        )}

This way, any errors in the onChange validator will be displayed once the user either blurs the field or attempts to submit the form, and the errors are removed as soon as the field has been changed to a valid value.

[cjoecker]

Good idea as a workaround, thanks!