TIL – requestSubmit offers a way to validate a form before submitting it
Tags: javascript, webdev
Published: 2020-02-16 08:30:02

---
title: TIL – requestSubmit offers a way to validate a form before submitting it
published: true
date: 2020-02-14 00:00:00 UTC
tags: javascript, webdev
canonical_url: https://www.stefanjudis.com/today-i-learned/requestsubmit-offers-a-way-to-validate-a-form-before-submitting-it/
---

HTML `form` elements are the foundation for the interactions in web pages. And they improved quite a little bit over the last years. Developers now can use [different types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#%3Cinput%3E_types) (`number`, `tel`, `color`, ...) and set [different input modes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) (`text`, `decimal`, `email`, ...) to only name two examples.

What remained a little bit tricky was to submit forms from within the scope of JavaScript. The `HTMLFormElement` defines a [`submit` method](https://html.spec.whatwg.org/multipage/forms.html#dom-form-submit), but it does not quite behave as one would expect.

## HTML's default behavior and the not matching `submit` method

Let's assume we have the following HTML form:

```html
<form action="">
  <label>
    Your name
    <input type="text" required>
  </label>
  <button>Submit</button>
</form>
```

And some JavaScript:

```javascript
document.querySelector('form')
  .addEventListener('submit', (event) => {
  // don't submit the form and
  // only log to the console
  event.preventDefault();
  console.log('submitted form');
});
```

When one clicks the `submit` button the following happens:

1. the form is validated and possible errors are shown
2. if the form is valid, it fires a `submit` event 
3. the `submit` handler is called and it prevents the submission

The `submit` event gives developers a way to react to form submissions. And it's used a lot! Common scenarios in modern applications are to call `preventDefault` on it and make AJAX requests using JavaScript to prevent a page reload.

*But what happens when you get the form from the DOM and submit it in JavaScript via `submit`?*

```javascript
document.querySelector('form').submit();
```

The answer is – the form is submitted! (🤦‍♂️ duh!) What's surprising is that __there won't be an input validation__, and __there won't be a `submit` event__. You would transfer all the values included in the form at the given time. This could lead to unexpected behavior, and it is not what one would expect by calling `submit`.

You can work around this problem by calling `click` on the submit button. This action triggers the standard behavior, including validation and a fired `submit` event. 

And this approach works, great – case closed! I never thought of it as elegant or pretty, though. 

## A new method that does what developers expect

People started [to work on a solution to this behavior in June 2019](https://github.com/whatwg/html/issues/4187) (the proposal is an interesting read). The `HTMLFormElement` now includes an extra method called `requestSubmit`. And this method does the same as clicking a `submit` button. 🎉

There is no magic to it – __it does what you expect__ and offers the great goodies HTML forms ship by default. I have to say – I'm excited about it!


|  `submit`                       | `requestSubmit`           |
| ------------------------------- | --------------------------|
| doesn't trigger `submit` event  | triggers `submit` event   |
| doesn't trigger validation      | triggers validation       |
| can't be canceled               | can be canceled via `event.preventDefault` in a `submit` event handler |

The browser support is as follows (there is not caniuse.com entry at the time of writing):

- ✅ Chromium browsers (the new Microsoft Edge, Chrome, Opera, ...)
- ❌ Firefox (it's currently behind a flag and will ship with v75)
- ❌ Safari

You can read more about it on [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit), have a look at it [in the spec](https://html.spec.whatwg.org/multipage/forms.html#dom-form-requestsubmit) or [see it in action on CodePen](https://codepen.io/stefanjudis/pen/NWqxyzL).