Disable button till all the form fields get filled in Formik

Question

I am using Formik form. I have two fields inside it. I need to disable the save button till both the fields get filled.

<Formik initialValues={initialValues} validationSchema={validate} onSubmit={() => this.handleSubmit()}>
  {({ values, handleChange, handleSubmit, setValues, isSubmitting }) => (
    <form onSubmit={handleSubmit} noValidate>
      <div>
        <div onClick={this.showDrawer}>
          <h6>Select Company </h6>
          <input name="customer" readOnly placeholder="Select" value={values.customer} type="text" />
        </div>
        <ErrorMessage component="span" name="customer" />
      </div>
      <div>
        <div onClick={this.showDrawer}>
          <h6>Select Driver</h6>
          <input name="driver" readOnly placeholder="Select" value={values.driver} type="text" />
        </div>
        <ErrorMessage component="span" name="driver"/>
      </div>
      <button type="submit" disabled={isSubmitting}>
        Save
      </button>
    </form>
  )}
</Formik>

Does this answer your question? [React formik form validation: How to initially have submit button disabled](https://stackoverflow.com/questions/59443005/react-formik-form-validation-how-to-initially-have-submit-button-disabled) — Harmandeep Singh Kalsi, Jul 22 '20 at 14:09
Did you check this ? https://github.com/formium/formik/issues/147 — Harmandeep Singh Kalsi, Jul 22 '20 at 14:12
@HarmandeepSinghKalsi The solution in the github worked for me. But still formik itself should give some own way — Profer, Jul 22 '20 at 14:19
If you think there is no way , you can open an issue in the github. — Harmandeep Singh Kalsi, Jul 22 '20 at 14:20

score 5 · Answer 1 · answered May 25 '21 at 12:21

<Formik initialValues={initialValues} validationSchema={validate} onSubmit={() => this.handleSubmit()}>
  {({ values, handleChange, handleSubmit, setValues, isSubmitting, dirty, isValid }) => (
    <form onSubmit={handleSubmit} noValidate>
      <div>
        <div onClick={this.showDrawer}>
          <h6>Select Company </h6>
          <input name="customer" readOnly placeholder="Select" value={values.customer} type="text" />
        </div>
        <ErrorMessage component="span" name="customer" />
      </div>
      <div>
        <div onClick={this.showDrawer}>
          <h6>Select Driver</h6>
          <input name="driver" readOnly placeholder="Select" value={values.driver} type="text" />
        </div>
        <ErrorMessage component="span" name="driver"/>
      </div>
      <button type="submit" disabled={!(dirty && isValid)}>
        Save
      </button>
    </form>
  )}
</Formik>

please provider an explanation how this code solve the problem. — OMR, May 25 '21 at 18:01

score 0 · Answer 2 · edited Apr 30 '21 at 08:06

0

{
  ({ errors, ...others }) => (
  ...other components
  <button type="submit" disabled={isSubmitting || Object.keys(errors).length > 0}>
    Save
  </button> )
}

edited Apr 30 '21 at 08:06

Ajeet Shah

18,551
8
57
87

answered Apr 30 '21 at 07:47

MANISH PRAJAPATI

11
2

3

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – Ajeet Shah Apr 30 '21 at 08:07

Disable button till all the form fields get filled in Formik

2 Answers2