How to disable form submit on enter with useFormik?

Question

I am building a form using React, Typescript and Formik. The form has three inputs. I want to prevent the form from submitting when the user presses enter in the input fields.

My first approach was using the event.preventDefault() statement, but that didn't work. Then I found this solution here on stackoverflow, but in this solution the Formik component is used and not the useFormik hook.

So I wounder how to disable form submit on enter with useFormik?

Antoine Gagnon · Accepted Answer · 2021-12-06 18:27:36Z

1

The useFormik hook provides a handleSubmit methods which handles that, pass it to your form onSubmit prop.

...
const fomrik = useFormik(...);

return (
  <form onSubmit={formik.handleSubmit}>
...

answered Dec 6, 2021 at 18:27

Antoine Gagnon

9928 silver badges14 bronze badges

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

Comments

Ajith S Nair · Accepted Answer · 2023-05-11 05:16:37Z

1

<button type='button'>Submit</button>

type='button'

By using this, pressing enter would not trigger the form onSubmit .

edited May 11, 2023 at 5:16

answered May 5, 2023 at 4:34

Ajith S Nair

113 silver badges6 bronze badges

Comments

Onur Doğan · Accepted Answer · 2024-11-10 12:07:50Z

1

we can prevent it on the form:

<Form onKeyDown={(e) => {
    if (e.key === 'Enter') {
      e.preventDefault();
    }
  }}
>

edited Nov 10, 2024 at 12:07

Onur Doğan

2,11612 gold badges35 silver badges60 bronze badges

answered Nov 7, 2024 at 10:06

LS-MTR

112 bronze badges

Collectives™ on Stack Overflow

How to disable form submit on enter with useFormik?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related