Published at
Updated at
Reading time
This post is part of my Today I learned series in which I share all my web development learnings.

HTML form elements are the foundation for web page interactions and they improved quite a little bit over the last years. Today, developers can use different types (number, tel, color, ...) and set different input modes (text, decimal, email, ...) to name only two examples.

What remained complicated was to submit forms via JavaScript. Even though the HTMLFormElement defines a submit method, 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="">
    Your name
    <input type="text" required>

And some JavaScript:

  .addEventListener('submit', (event) => {
    // don't submit the form and
    // only log to the console
    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 validation passes and the form is valid, it fires a submit event
  3. the submit handler is called and it prevents the form submission due to event.preventDefault()

The triggered submit event gives developers a way to react to form submissions in JavaScript. And it's used a lot! A common scenario is to prevent form submissions (preventDefault), and make AJAX requests to replace page contents dynamically.

But what happens when you submit a form in JavaScript via submit?


The answer is โ€“ the form is submitted! (๐Ÿคฆโ€โ™‚๏ธ duh!) What's surprising is that there won't be input and form validation, and there won't be a submit event. All the field values are submitted no matter if the inputs are valid or not.

This is unexpected behavior and it should behave like pressing the submit button. There are surely reason for skipping the validation, but I'd expect that submit also validates the form and only proceeds if everything is valid.

You can work around this problem by triggering the click on the submit button. The click then triggers the standard behavior that users see when they interact with a form, including validations and a fired submit event.

Mimicking user behavior works fine and that's great, but I never thought of this solution as elegant. It turns out there's a better way!

A new JavaScript method that validates forms before submitting

People started to work on a solution to this behavior in June 2019 (the proposal is an interesting read). The HTMLFormElement now includes a new method called requestSubmit. And this method does the same as clicking a submit button. ๐ŸŽ‰

There is no magic to it โ€“ the JavaScript method does what you expect and offers the great goodies HTML forms ship by default (including the form validation). I have to say โ€“ I'm excited about it!

doesn't trigger submit eventtriggers submit event
doesn't trigger form validationtriggers form validation
can't be canceledcan be canceled via event.preventDefault in a submit event handler

The method's browser support as of March 2021 is as follows:

Update: Safari 16 starts shipping requestSubmit so that cross-browser support will be given soon.

MDN Compat Data (source)
Browser support info for requestSubmit()

You can read more about the requestSubmit method on MDN, dive into its specification or see it in action on CodePen.

You can see a #devsheet visualizing the difference in the video below.

requestSubmit show of (devsheet)

If you're interested in reading more quick TIL ("today i learned") posts, subscribe to my weekly newsletter. ๐Ÿ‘‹

Was this TIL post helpful?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 14 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles