web-dev-qa-db-ja.com

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

私は独自のフォーム検証javascriptライブラリを作成し、送信ボタンがクリックされたかどうかを検出する方法をgoogleで探していましたが、HTMLのonSubmit="function()"でonClickを使用する必要があるコードのみが見つかりました。

OnSubmitやonClick javascriptを追加するなどのhtmlコードに触れる必要がないように、このjavascriptを作成したいと思います。

javascriptformsvalidation
107
ed1t

Derek's answer を参照してください。これは、現在受け入れられている答えです。これには、この答えに含まれていたものすべてが含まれています。

（デレクがライブラリの例を含めるように更新した後、この回答を削除しようとしましたが、緑色のチェックマークが付いているので、SOは許可しません）

13
Ben Lee

なぜ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>

  1. AngularJS（1.x）

    <form ng-submit="callback()">

$scope.callback = function(){ /*...*/ };

    ここで、$scopeは、 controller 内のフレームワークによって提供されるスコープです。 参照

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

    ハンドラをonSubmit propに渡すだけです。 参照

  3. その他のフレームワーク/ライブラリ

    フレームワークのドキュメントを参照してください。

検証

JavaScriptでいつでも検証を行うことができますが、HTML5にはネイティブ検証もあります。

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

JavaScriptも必要ありません！ネイティブ検証がサポートされていない場合はいつでも、JavaScriptバリデーターにフォールバックできます。

デモ： http://jsfiddle.net/DerekL/L23wmo1L/

446
Derek 朕會功夫

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

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