requestSubmit offers a way to validate a form before submit
- Published at
- Updated at
- Reading time
- 3min
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.
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:
- the form is validated and possible errors are shown
- if the form validation passes and the form is valid, it fires a
submit
event - the
submit
handler is called and it prevents the form submission due toevent
.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
?
document.querySelector('form').submit();
The answer is โ the form is submitted! (๐คฆโโ๏ธ duh!) But there won't be any input or form validations, 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 and calling submit
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, but it isn't elegant. It turns out there's a better way!
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.
document.querySelector('form').requestSubmit();
There is no magic to it โ the JavaScript method does what you expect and offers the goodies HTML forms ship by default (including the form validation). I'm excited!
submit | requestSubmit |
---|---|
doesn't trigger submit event | triggers submit event |
doesn't trigger form validation | triggers form validation |
can't be canceled | can be canceled via event in a submit event handler |
And the best thing: every modern browser supports requestSubmit
.
76 | 76 | 79 | 75 | 75 | 16 | 16 | 12.0 | 76 |
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.
If you're interested in reading more quick TIL ("today i learned") posts, subscribe to my weekly newsletter. ๐
Join 5.4k readers and learn something new every week with Web Weekly.