如何在JavaScript中监听表单提交事件？

Question

我想编写自己的表单验证JavaScript库，但我在谷歌上搜索如何检测提交按钮是否被点击时找到的所有代码都必须在HTML中使用 onSubmit="function()" 这样的 onClick。

我希望使这个JavaScript库不需要修改任何HTML代码，例如添加onSubmit或onClick JavaScript代码。

- ed1t

---

为什么不使用document.forms['yourForm'].onsubmit = function(){}？或者addEventListener？ - Joseph Silber

你是真的想检查提交按钮是否被点击，还是想要检查用户何时提交表单（他们可以通过单击按钮或从字段中按Enter键提交）？ - nnnnnn

请查看此答案 https://dev59.com/Dms05IYBdhLWcg3wJ-yQ#70980807，了解在同一页中处理多个表单的提交事件的纯JavaScript方法，而不使用Id ... using ( document.forms )。 - Harsh Patel

Answer 1

为什么人们在不必要的情况下总是使用jQuery？
为什么人们不能只使用简单的JavaScript？

var ele = /*Your Form Element*/;
if(ele.addEventListener){
    ele.addEventListener("submit", callback, false);  //Modern browsers
}else if(ele.attachEvent){
    ele.attachEvent('onsubmit', callback);            //Old IE
}

callback是一个函数，你希望在表单提交时调用它。

关于EventTarget.addEventListener，请查看MDN文档。

要取消原生的submit事件（防止表单被提交），在你的回调函数中使用.preventDefault()。

document.querySelector("#myForm").addEventListener("submit", function(e){
    if(!isValid){
        e.preventDefault();    //stop form from submitting
    }
});

---

使用库监听submit事件

如果出于某种原因你决定需要使用一个库（比如你已经在使用一个库或者不想处理跨浏览器的问题），这里提供了一些常用库中监听submit事件的方法：

1. jQuery

   $(ele).submit(callback);
   

   Where ele is the form element reference, and callback being the callback function reference. Reference

    <iframe width="100%" height="100%" src="http://jsfiddle.net/DerekL/wnbo1hq0/show" frameborder="0"></iframe>

2. AngularJS (1.x)

   <form ng-submit="callback()">
   
   $scope.callback = function(){ /*...*/ };
   

   Very straightforward, where $scope is the scope provided by the framework inside your controller. Reference

3. React

   <form onSubmit={this.handleSubmit}>
   
   class YourComponent extends Component {
       // stuff
   
       handleSubmit(event) {
           // do whatever you need here
   
           // if you need to stop the submit event and 
           // perform/dispatch your own actions
           event.preventDefault();
       }
   
       // more stuff
   }
   

   Simply pass in a handler to the onSubmit prop. Reference

4. Other frameworks/libraries

   Refer to the documentation of your framework.

---

验证

您可以使用JavaScript进行验证，但是HTML5也提供了本地验证功能。

<!-- Must be a 5 digit number -->
<input type="number" required pattern="\d{5}">

无需使用JavaScript！每当原生验证不受支持时，您可以退回到JavaScript验证器。

演示：http://jsfiddle.net/DerekL/L23wmo1L/

- Derek 朕會功夫

---

这五行“可怕...丑陋”的代码替代了4,000行jQuery提供的所需功能，而这4,000行代码也必须是“可怕...丑陋”的。 - RobG

我对jQuery本身并没有太多意见，只是对那些将其视为某种魔法咒语的人有些不满，他们没有意识到可以用几行代码替代整个jQuery。何不花时间了解一下浏览器的实际工作原理呢？这真的不难。 - RobG

我个人认为，一个人应该先了解基础知识。 - Derek 朕會功夫

同样的精神，我们确实应该尝试写更多汇编语言。开玩笑的说（我还是更喜欢jquery解决方案，并且如果你真的想了解内部机制，这是一个无穷无尽的兔子洞），但是，是的，我很高兴我确实知道一些汇编语言，并且知道如何建立TCP连接等。但我仍然不会只是为了教授底层原理而交给任何人一个低阶解决方案。 - Josh Sutterfield

如果你的项目需要 jQuery 并且已经有了它，为什么不使用呢？否则就使用 JS。 - ProgZi

Answer 2

这是您可以拥有自己的javascript函数在onSubmit发生时被调用的最简单的方法。

HTML

<form>
    <input type="text" name="name">
    <input type="submit" name="submit">
</form>

JavaScript

window.onload = function() {
    var form = document.querySelector("form");
    form.onsubmit = submitted.bind(form);
}

function submitted(event) {
    event.preventDefault();
}

- Derek Dawson

---

为什么你决定绑定'submitted'函数？函数内部没有使用'this'。 - Lior

“bind”确实是不必要的。 - pstadler

绑定后，如果没有preventDefault，它对我起作用。 - denOldTimer

Answer 3

根据您的要求，您也可以在不使用jQuery等库的情况下执行以下操作：

将此代码添加到标签中：

window.onload = function () {
    document.getElementById("frmSubmit").onsubmit = function onSubmit(form) {
        var isValid = true;
        //validate your elems here
        isValid = false;

        if (!isValid) {
            alert("Please check your fields!");
            return false;
        }
        else {
            //you are good to go
            return true;
        }
    }
}

您的表单可能仍然类似于以下内容：

    <form id="frmSubmit" action="/Submit">
        <input type="submit" value="Submit" />
    </form>

- fakedob

---

始终使用addEventListener而不是onsubmit或onload，以便其他开发人员可以添加自己的侦听器。 - kuzey beytar

Answer 4

如果您在同一页中有多个表单，并且希望在不使用ID的情况下处理提交事件监听器，请参考以下内容：

jQuery代码：

$('form').submit(function (event) {
    targetObj = event.target;
    // do your logic
});

---

纯JavaScript技巧

只需在onload事件中执行以下操作即可：

for(var i=0; i<document.forms.length; i++){
    var form = document.forms[i];
    form.addEventListener("submit", myListener,false);
}

致谢：本文涉及多重表单提交事件监听器处理的JavaScript翻译得益于StackOverflow社区上Jan Pfeifer的回答

希望这能帮助到某些人

- Harsh Patel

Answer 5

使用 jQuery：

$('form').submit(function () {
    // Validate here

    if (pass)
        return true;
    else
        return false;
});

- Justin808