With an input of type="number", browsers will validate the value according to the step attribute by default. If the input value is considered invalid, form submission is prevented and the browser displays an error message. A non-Formik form displays the error message when clicking the submit button or pressing the enter key. However, it seems that a Formik form will skip this validation if the form is submitted by clicking the submit button. The validation will display in a Formik form if the enter key is pressed inside the invalid input. So it is still possible to see the error message, but the behavior is inconsistent with the submit button.
Expected behavior
Clicking the submit button should behave the same as pressing the enter key. Ideally, all browser validations should execute by default when either option is used to submit the form.
I don't know enough about the internals of Formik to suggest a solution.
Additional context
It's worth noting that when a required input is blank, the browser's validation message still appears when clicking the submit button in a Formik button, so it doesn't appear to be that Formik is intending to skip all browser input validations.
Bug report
Current Behavior
With an input of
type="number", browsers will validate the value according to thestepattribute by default. If the input value is considered invalid, form submission is prevented and the browser displays an error message. A non-Formik form displays the error message when clicking the submit button or pressing the enter key. However, it seems that a Formik form will skip this validation if the form is submitted by clicking the submit button. The validation will display in a Formik form if the enter key is pressed inside the invalid input. So it is still possible to see the error message, but the behavior is inconsistent with the submit button.Expected behavior
Clicking the submit button should behave the same as pressing the enter key. Ideally, all browser validations should execute by default when either option is used to submit the form.
Reproducible example
Try submitting a non-integer number such as
1.2in the inputs to observe the difference in behavior: Codesandbox example derived from demo linked in main docsSuggested solution(s)
I don't know enough about the internals of Formik to suggest a solution.
Additional context
It's worth noting that when a
requiredinput is blank, the browser's validation message still appears when clicking the submit button in a Formik button, so it doesn't appear to be that Formik is intending to skip all browser input validations.Your environment