如何在 javascript 中收聽表單提交事件？

Question

我想編寫自己的表單驗證javascript庫，我一直在看谷歌如何檢測是否點擊了提交按鈕，但我發現的只是你必須在html中使用onClick onSubmit="function()"的代碼。

我想制作這個 javascript，這樣我就不必觸摸任何 html 代碼，比如添加 onSubmit 或 onClick javascript。

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事件

如果由於某種原因您決定需要一個庫（您已經在使用一個庫或者您不想處理跨瀏覽器問題），這里列出了在公共庫中偵聽提交事件的方法列表：

1. jQuery

    $(ele).submit(callback);

   其中ele是表單元素引用，而callback是回調函數引用。 參考

 <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(){ /*...*/ };

   非常簡單，其中$scope是您的控制器內部框架提供的范圍。 參考

3. 反應

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

   只需將處理程序傳遞給onSubmit道具。 參考

4. 其他框架/庫

   請參閱您的框架的文檔。

---

驗證

您始終可以在 JavaScript 中進行驗證，但對於 HTML5，我們也有本機驗證。

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

你甚至不需要任何 JavaScript！ 只要不支持本機驗證，您就可以回退到 JavaScript 驗證器。

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

Answer 2

請參閱Derek的答案 ，現在應該是接受的答案。 它包括這個答案所包含的一切以及更多。

（我試圖刪除這個答案后Derek更新他的包含庫示例，但有綠色選中標記，SO不會讓我）

Answer 3

這是在onSubmit發生時調用自己的 javascript 函數的最簡單方法。

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();
}

Answer 4

根據您的要求，您還可以在沒有 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>

Answer 5

如果您在同一頁面中有多個表單並且您想在不使用 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 處理多表單提交事件偵聽器信用轉至Jan Pfeifer 在 StackOverflow 社區上的回答

我希望這對某人有幫助

Answer 6

使用 jQuery：

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

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