跳到主要内容

Form Submission

Submission Phases#

To submit a form in Formik, you need to somehow fire off the provided handleSubmit(e) or submitForm prop. When you call either of these methods, Formik will execute the following (pseudo code) each time:

Pre-submit#

  • Touch all fields. initialValues are required and should always be specified. See #445
  • Set isSubmitting to true
  • Increment submitCount + 1

Validation#

  • Set isValidating to true
  • Run all field-level validations, validate, and validationSchema asynchronously and deeply merge results
  • Are there any errors?
    • Yes: Abort submission. Set isValidating to false, set errors, set isSubmitting to false
    • No: Set isValidating to false, proceed to "Submission"

Submission#

  • Proceed with running your submission handler (i.e.onSubmit or handleSubmit)
  • you call setSubmitting(false) in your handler to finish the cycle

Frequently Asked Questions#

How do I determine if my submission handler is executing?

If isValidating is false and isSubmitting is true.

Why does Formik touch all fields before submit?

It is common practice to only show an input's errors in the UI if it has been visited (a.k.a "touched"). Before submitting a form, Formik touches all fields so that all errors that may have been hidden will now be visible.

How do I protect against double submits?

Disable whatever is triggering submission if isSubmitting is true.

How do I know when my form is validating before submit?

If isValidating is true and isSubmitting is true.