综合开发

requestSubmit offers a new way to validate a form before submitting it

微信扫一扫,分享到朋友圈

requestSubmit offers a new way to validate a form before submitting it

HTML form
elements are the foundation for the interactions in web pages. And boy, 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 if it's valid
// only log to the console
event.preventDefault();
console.log('submitted form');
});

When one clicks the submit
button the following happens:

submit
submit

The submit
event gives developers a way to react to form submissions. And it’s used a lot! Common scenarios are to call preventDefault
and make AJAX requests using JavaScript.

But what happens when you grab the form and submit it in JavaScript land?

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 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. :tada:

There is not much 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 validationtriggers 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:

  • :white_check_mark: Chromium browser (the new Microsoft Edge, Chrome, Opera, …)
  • :x: Firefox (it’s currently behind a flag and will ship with v75)
  • :x: Safari

You can read more about it on MDN
, have a look at it in the spec
or see it in action on CodePen
.

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

Environment-Dependent Code Execution with Spring Boot and Docker

上一篇

Daniel Vérité: Isolation Repeatable Read in PostgreSQL versus MySQL

下一篇

你也可能喜欢

评论已经被关闭。

插入图片

热门栏目

requestSubmit offers a new way to validate a form before submitting it

长按储存图像,分享给朋友