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

栏目: IT技术 · 发布时间: 4年前

内容简介:HTMLWhat remained a little bit tricky was to submit forms from within the scope of JavaScript. TheLet's assume we have the following HTML form:

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

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

程序员的职业素养

程序员的职业素养

Robert C.Martin / 章显洲、余晟 / 人民邮电出版社 / 2012-9-1 / 49.00元

本书是编程大师Bob 大叔40 余年编程生涯的心得体会, 讲解成为真正专业的程序员需要什么样的态度、原则,需要采取什么样的行动。作者以自己以及身边的同事走过的弯路、犯过的错误为例,意在为后来人引路,助其职业生涯迈上更高台阶。 本书适合所有程序员,也可供所有想成为具备职业素养的职场人士参考。一起来看看 《程序员的职业素养》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

SHA 加密
SHA 加密

SHA 加密工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具