SubmitButton is enabled despite failing validation so long as it's on initial values

[yoruvo]

Possible values in form:

export interface SupportFormValues {
  name: string
  email: string
  topic: string
  version?: string
  phone?: string
  description: string
}

Initial values:

const softwareVersion = "1.10.0"

export const initialValues = {
  name: "",
  email: "",
  topic: "error",
  version: softwareVersion,
  phone: "",
  description: "",
}

Validation schema:

  name: Yup.string().required("form.validation.required"),

  email: Yup.string()
    .email("form.validation.emailInvalid")
    .required("form.validation.required"),

  topic: Yup.string()
    .required("form.validation.required")
    .oneOf(["general", "error", "call"], "form.validation.topicInvalid"),

  version: Yup.string().when("topic", {
    is: (topic) => topic === "error",
    then: Yup.string()
      .required("form.validation.required")
      .matches(versionRegExp, "form.validation.versionInvalid"),
  }),

  phone: Yup.string().when("topic", {
    is: (topic) => topic === "call",
    then: Yup.string()
      .required("form.validation.required")
      .matches(phoneRegExp, "form.validation.phoneInvalid"),
  }),

  description: Yup.string()
    .required("form.validation.required")
    .min(10, "form.validation.descriptionLength"),
})

As you can see, all the fields are required, but many are empty.

Yet, at the start of the form, and whenever you reset to the "initial values" (Version at 1.10.0, Topic at "error", rest empty), the Submit Button is enabled despite not passing validation.

[jannikbuschke]

This is by design (https://github.com/jannikbuschke/formik-antd#submitting-and-resetting-forms).

If the button would be disabled, the user might not see any validation feedback, as it is usually only rendered if the corresponding field has been touched. By enabling the submit button and clicking it, all fields will be touched, thus rendering the feedback if the form is invalid. You might want to run validation again in your submit handler, if you don't want to send an invalid form to your backend (there you should validate anyway).

See also #135, #125, #87, #73