JavaScriptでフォーム送信イベントをリッスンするにはどうすればよいですか？

私は自分のフォーム検証JavaScriptライブラリを書きたいと思っています。送信ボタンがクリックされたかどうかを検出する方法をGoogleで探していましたがonSubmit="function()"、HTMLでonClick onを使用する必要があるコードだけが見つかりました。

このJavaScriptを作成して、onSubmitやonClick javascriptを追加するようなHTMLコードに触れないようにします。

なぜ人々は必要のないときに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/

これは、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();
}

要件に基づいて、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>

jQueryの場合：

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

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