Skip to content

Not uncommon to see folks add form submit handlers on the submit buttons click event vs on the forms submit handler. The problem is this prevents users from being able to fill out the form and submit it solely from the keyboard.

<form>
  <button onClick={handleSubmit} />
</form>

Instead, apply the handleSubmit function to the form onSubmit handler. This ensures the form can be submitted when the user hits the return key.

<form onSubmit={handleSubmit}>
  <button type="submit" />
</form>

If for whatever reason your button needs to live outside of the form element, likely in a dialog situation, you can ensure the same functionality by passing the forms id to the button via the form attribute as shown below.

<form id="contactForm" onSubmit={handleSubmit}>
</form>
<button form="contactForm" type="submit" />