Display Formik errors only when submit-CodePudding

I have a classic Formik form with Yup, like this :

// Schema for the form
const OrderFormSchema = Yup.object().shape({
  lastname: Yup.string()
    .required('Ce champs est obligatoire.'),
  firstname: Yup.string()
    .required("Ce champs est obligatoire"),
  company: Yup.string()
    .required('Ce champs est obligatoire.'),
  email: Yup.string()
    .email("Email invalide")
    .required("Ce champs est obligatoire"),
  phone: Yup.string()
    .required('Ce champs est obligatoire.'),
  postalCode: Yup.string()
    .required('Ce champs est obligatoire.'),
  message: Yup.string()
    .required('Ce champs est obligatoire.')
});


<Formik
            initialValues={initialValues}
            validationSchema={OrderFormSchema}
            onSubmit={(values) => { onSubmit(values) }}
          >
            {({ errors }) => (
              <Form>
                 [...]
              </Form>
            )}
          </Formik>

The "problem" : If i focus my first input, all other inputs will take the error style because they are still empty (which is logical, we can't type in all input at the same time)

I would like to display errors only when I submit my form. Is it possible with Formik ?

Thank you

CodePudding user response：

Try setting validateOnChange and validateOnBlur to false as formik validates everything on the fly by default.

So something like this should work

<Formik
  initialValues={initialValues}
  validationSchema={OrderFormSchema}
  validateOnChange={false}
  validateOnBlur={false}
  onSubmit={(values) => { onSubmit(values) }}
 >
            {({ errors }) => (
              <Form>
                 [...]
              </Form>
            )}
 </Formik>

https://formik.org/docs/api/fieldarray#validateonchange-boolean https://formik.org/docs/api/withFormik#validateonblur-boolean

CodePudding user response：

By disabling validation onChange and onBlur formik will validate on submit.

You need to pass in the props validateOnChange={false} and validateOnBlur={false}.

<Formik
  validateOnChange={false}
  validateOnBlur={false}
  ...
/ >

CodePudding user response：

Please add onSubmit event with bind formik's handleSubmit

 {({ errors, handleSubmit }: any) => (
      <form onSubmit={handleSubmit}>
      </form> 
 )}