Formik React with 2 buttons (Submit and Save) to submit form - Save button not to trigger validation

Question

Pretty new with Formik, I have a simple form, which has validation. I need to have 2 buttons, Submit and a Save button which will mostly do the same thing, however, if "Save" button is clicked, I want the validation to be "disabled" or rather, all required fields will no longer be required. Any ideas how I can achieve this?

Some codes below:

const initialValues = {
    title: "",
    description: ""
};

const validationSchema = Yup.object().shape({
        title: Yup.string()
            .max(50, 'You may only enter up to 50 characters')
            .required('Required'),
        description: Yup.string()
            .max(200, 'You may only enter up to 200 characters')
            .required('Required'),
        })


const CreateForm = () => {

    const handleCancel = () => {
        alert("Cancelled!")
    }

    return (
        <div>
            <Formik initialValues={initialValues}
                validationSchema={validationSchema}
                onSubmit={(values) => {
                    setTimeout(() => {
                        alert(JSON.stringify(values, null, 2));
                    }, 3000)
                }}
            >
                {props => (
                    <Form>
                        <CustomTextInput label="Title"
                            name="title" type="input" placeholder="Enter Title" />

                        <CustomTextInput label="Description"
                            name="description" type="input" placeholder="Description" />

                        <div>
                            <Button type="submit" variant="contained" color="primary">
                                Submit
                            </Button> &nbsp;
                            <Button type="submit" variant="contained" color="secondary" >
                                Save
                            </Button>&nbsp;
                            <Button variant="contained" color="default" onClick={handleCancel}>
                                Cancel
                            </Button>
                        </div>
                    </Form>
                )}
            </Formik>
        </div>
    )
}

export default CreateForm

aturan23 · Accepted Answer · 2020-05-12 11:36:55Z

13

Firstly remove type="submit". Because formik will understand it like submit and will validate it. Second add onClick function:

<Button
  variant="contained"
  color="secondary"
  onClick={() => handleSave(props.values)} >Save</Button>

And:

const handleSave = (values) => {
  // do what you want like on submit
}

answered May 12, 2020 at 11:36

aturan23

5,4904 gold badges33 silver badges57 bronze badges

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

6 Comments

G Josh Over a year ago

Wow. I didn't realize it was that simple. Thank you so much!

Siraj Alam Over a year ago

How would I do the same except I have to validate only a few fields in case of save and all fields in case of submit, how would I do that?

kalzen Over a year ago

problem with this: you might get invalid values, whereas formik won't call onSubmit with invalid form values.

5uperdan Over a year ago

Most browsers default button elements to type="submit". Add type="button"

Siraj Alam Over a year ago

IDK, I came here 3 years, thanks again for the answer @aturan23

|

first · Accepted Answer · 2023-03-07 11:03:02Z

To achieve this you need to have a submitButtonState and check the value of this state when submitting the form.

const [submitButtonState, setSubmitButtonState] = useState(null)

const handleSubmitButtonState = (isSubmit) => {
  setSubmitButtonState(isSubmit)
}

//...
<Formik
  initialValues={{
    //...
  }}
  onSubmit={(values) => {
 // check submitButtonState value here
  console.log(submitButtonState)
  }}
  >
  {() => (
  <Form>
  //...
    <section>
      <button type="submit"
      onClick={() => handleSubmitButtonState("skip")}
      >
      Skip for now
      </button>
      <button
        type="submit"
        onClick={() => handleSubmitButtonState("submit")}
      >
      Submit
      </button>
     </section>
    </Form>
   )}
 </Formik>

XXIV · Accepted Answer · 2024-05-05 18:49:01Z

0

Add

type="button"

to your button to make it not function as submit button in the form.

answered May 5, 2024 at 18:49

XXIV

611 silver badge8 bronze badges

Comments

Lalo19 · Accepted Answer · 2023-08-15 22:28:43Z

-1

Create a variable

  const [btnClicked, setBtnClicked] = React.useState('');

Add the onMouseOver event to buttons setting a value

        <form onSubmit={formik.handleSubmit}>
                 <Button type="submit" onMouseOver={(event)=>{
                   setBtnClicked('save');
              }}> Save </Button>

              <Button type="submit" onMouseOver={(event)=>{
                  setBtnClicked('save_and_close');
              }}>Save and close </Button>
        </form>

On the formik submit event you can get the value of the button selected to do whatever you want

      const formik = useFormik({ 
         initialValues: { },
         validationSchema: yup.object({ }),
         onSubmit: (values) => {
            if(btnClicked == "save"){
              // option 1
            } else {
              // Option 2
            }
         }
       });

edited Aug 15, 2023 at 22:28

answered Jan 11, 2023 at 17:08

Lalo19

1576 bronze badges

2 Comments

JoeDuncko Over a year ago

Very large chance the event triggers before the rerender updates the state. I'd stay away from this solution.

Muneeb Over a year ago

setstate will take time and meanwhile, onSubmit will trigger with stale state

Collectives™ on Stack Overflow

Formik React with 2 buttons (Submit and Save) to submit form - Save button not to trigger validation

4 Answers 4

6 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related