TIL – 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 (number, tel, color, ...) and set different input modes (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, 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:

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

And some 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?

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 (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!

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, have a look at it in the spec or see it in action on CodePen.