SubmitButton is enabled despite failing validation so long as it's on initial values
yoruvo opened this issue · comments
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.
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).