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 ponent="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 ponent="span" name="driver"/>
      </div>
      <button type="submit" disabled={isSubmitting}>
        Save
      </button>
    </form>
  )}
</Formik>

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 ponent="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 ponent="span" name="driver"/>
      </div>
      <button type="submit" disabled={isSubmitting}>
        Save
      </button>
    </form>
  )}
</Formik>

• javascript
• reactjs
• forms
• formik

Share Follow edited Jul 22, 2020 at 14:09 Profer asked Jul 22, 2020 at 14:07 ProferProfer 6431010 gold badges4747 silver badges9797 bronze badges 5

• Does this answer your question? React formik form validation: How to initially have submit button disabled – Harmandeep Singh Kalsi Commented Jul 22, 2020 at 14:09
• @HarmandeepSinghKalsi Tried that but did not work – Profer Commented Jul 22, 2020 at 14:09
• Did you check this ? github./formium/formik/issues/147 – Harmandeep Singh Kalsi Commented Jul 22, 2020 at 14:12
• @HarmandeepSinghKalsi The solution in the github worked for me. But still formik itself should give some own way – Profer Commented Jul 22, 2020 at 14:19
• If you think there is no way , you can open an issue in the github. – Harmandeep Singh Kalsi Commented Jul 22, 2020 at 14:20

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

<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 ponent="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 ponent="span" name="driver"/>
      </div>
      <button type="submit" disabled={!(dirty && isValid)}>
        Save
      </button>
    </form>
  )}
</Formik>

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