react formik disable submit button with form validity

Question

I am using formik library for my react project. I need to disable submit button initially when mandatory fields are empty or have any errors. I checked form status using below code.

const formik = useFormik(false);

        <Formik
        initialValues={!location.state ? InvoiceInitalValues : location.state}
        validationSchema={POValidation} innerRef={formRef}
        onSubmit={(form, actions, formikHelper) => {
          console.log(form);
          console.log(formRef);
          setTimeout(() => {
            saveInvoice(form, actions, formikHelper);
            actions.setSubmitting(false);
          }, 1000);
        }}
      >
        {({
          handleSubmit,
          handleChange,
          setFieldValue,
          values,
          handleReset,
          errors,
          resetForm, isSubmitting


        })

I console logged form status using but form is always 'isValid: True'. Please check below image.

I printed it in the html also. but always isValid is True. I need to this for disable my button

printed status

 <p> {formik.isValid=== true ? "True" : "False"} </p>

I tried below code to disable my button

<Button className="btn btn-primary mr-1" type="submit" disabled={!formik.isValid}>

Submit

Why formik form validity is always true, even mandatory fields are empty. I spent more time to solve this. still could not fix this. Anyone know to fix this

Ajeet Shah · Accepted Answer · 2021-03-30 09:35:20Z

5

You created form using Formik component, but you are checking isValid on another formik instance created through useFormik hook. That's not right.

You should use either <Formik> or useFormik.

As you have written code using Formik component. Here is how you access isValid property:

<Formik
  initialValues={!location.state ? InvoiceInitalValues : location.state}
  // ...
>
  {({
    values,
    handleChange,
    // ... 
    isValid // HERE
  }) => (
    <form onSubmit={handleSubmit}>
      <input
...

Here is a codesandbox.

edited Mar 30, 2021 at 9:35

answered Mar 30, 2021 at 8:41

Ajeet Shah

19.9k10 gold badges66 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kumara Over a year ago

I tried it also. but form isValid always true. when form load it should be false and submit button should be disable.

Kumara Over a year ago

Beautiful !!! I applied to my project. Its working well. Thanks @Ajeet

king Over a year ago

@Kumara To achieve that You can pass a validateOnMount prop in the Formik wrapper to solve that.

king Over a year ago

@Kumara <Formik validateOnMount {...props}><Form /></Formik>

Collectives™ on Stack Overflow

react formik disable submit button with form validity

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related