Formik: Using `required` HTML5 attribute on field elements

[dillonbailey]

Question

If we want to make our forms more accessible by having required attribute set, is there a way for Formik to override the browser tooltip (in Chrome for instance) and show our custom error/validation message?

Current Behavior

Currently if you set a field to required the Yup validation does not get run, but rather the browser will notify the user that a field is required before a submission is attempted via tooltip.

For anyone searching this issue, using aria-required="true" is a current workaround.

Desired Behavior

If a field is required via HTML5 attributes, this notification will be suppressed and Formik errors will take precedence.

Suggested Solutions

1. Greater clarity around what a custom handleSubmit function looks like, it's not quite clear what the required params to pass to the formik handler are, if any, or if implementing a custom submit handler this can be skipped altogether. This solution would allow for users to more easily e.preventDefault(); which may suppress the default required handlers.
2. Bake this behaviour into the package.

Additional Information

---

• Formik Version: 0.11.11
• React Version: 16.2.0
• TypeScript Version: n/a
• CodeSandbox Link:
• OS: High Sierra (10.13.3)
• Node Version: v8.9.4
• Package Manager and Version: Yarn v1.5.1

[ewolfe]

Add a noValidate attribute to your <form /> element.

[dillonbailey]

👍😀