How to use different validation function onSubmit in react-final-form?

Question

Example - https://codesandbox.io/s/react-final-form-field-level-validation-example-jlqfx?fontsize=14

I have a form with age which is a required numerical field. I want to run two different validations

1. When the user enters a input, it should validate if the entry is a number. If the user leaves it empty, no error should be surfaced

2. When the user clicks submit, it should validate that the entry is not empty AND it's a number.

Basically, the non-empty validation should only run on submit. How do I achieve this using react-final-form

Answer 1

For submission only errors, put your validation logic directly in onSubmit. If onSubmit returns an object of errors (or a promise that resolves in one), those will be considered "submit errors", and they will appear in meta.submitError for any field that has one. So notice how you need to check both meta.error and meta.submitError when displaying the errors.