javascript - Javascriptでフォーム送信をキャッチするイベントは何ですか?

Question

ここでいくつか質問があります：

• フォームの送信時に Javascript を実行する (検証を行う) ために、どのイベントを使用するのだろうかと思っていました。
• 検証が完了したら、Javascript でフォームを送信するにはどうすればよいですか?

Answer 1

という名前のフォームがあるとしましょうmyForm:

var form = document.getElementById('myForm');

送信をキャッチするには:

try {
    form.addEventListener("submit", someFunction, false);
} catch(e) {
    form.attachEvent("onsubmit", someFunction); //Internet Explorer 8-
}

注: フォームの送信を停止するには、someFunctionreturn false を作成します。

フォームを送信するには:

form.submit();

Answer 2

使用することはできますaddEventListener(event, callback)が、InternetExplorerで適切にサポートされたことはありません。

IEはattachEvent(event, callback)代わりに使用します。

ビルド済みのaddEvent関数（たくさん利用可能）またはjQuery、Prototype、Mootoolsなどのライブラリを使用することを強くお勧めします。これらはすべて優れたイベント処理関数が組み込まれているためです。

Answer 3

jquery を使用すると、便利なフォーム送信イベント フックが組み込まれており、作業が非常に簡単になります。以下を確認してください。

http://docs.jquery.com/Events/submit

Answer 4

1) OnSubmitイベントをお探しですか?

2) onsubmit イベントで validate() のような関数を呼び出し、検証が失敗した場合は false を返すことができます。false が返された場合は、onsubmit 関数から false を返します。

のようかもしれません、

<form name="test" OnSubmit = "return Submit()">

function Submit()
{
return Validate()
}

function Validate()
{
//Validation code goes here
}

Answer 5

Sasha の投稿に対する Serhiy のコメントを確認しました。Serhiy が提供した JsFiddle の例は興味深いものでした。Serhiy が言及した動作を説明する回答を書きたいと思いました。

という名前のフォームがあるとしましょうmyForm:

var form = document.getElementById('myForm');

送信ボタン (<input type='submit' >) を使用して送信をキャッチするには:

try {
    form.addEventListener("submit", validationFunction, false);
} catch(e) {
    form.attachEvent("onsubmit", validationFunction); //Internet Explorer 8-
}

注: フォームの送信を停止するには、validationFunctionreturn false を作成します。

JavaScript 経由でフォームを送信するには:

form.submit();

注: <input type="button" onclick="form.submit()" /> を使用する場合、attachEvent で追加された onsubmit イベント ハンドラは呼び出されません。したがって、次のようなものを使用する必要があります。

<input type="button" onclick="if (validationfunction()) form.submit();" />

または、ボタンがある場合は次のようにします。

ボタンのクリック イベントに添付する JavaScript を追加できます。var btnValidateAndSubmit = document.getElementById("btnValidateAndSubmit");

try {
    btnValidateAndSubmit .addEventListener("click", validationAndSubmitFunction, false);
} catch(e) {
    btnValidateAndSubmit .attachEvent("onclick", validationAndSubmitFunction); //Internet Explorer 8-
}

最後に、リスト アイテムを編集するために SharePoint Web フォームで作業していて、Web フォームにカスタム検証を追加したいとします。次の JavaScript を Web フォームに追加して、[OK] ボタンの onclick にカスタム検証を追加できます。

var oElements = document.getElementsByTagName("input");
for  (var i=0; i< oElements.length; i++)
{
   var elementName = oElements[i].getAttribute("Title");
   var elementType = oElements[i].getAttribute("type");
   var elementValue = oElements[i].value;

   if (elementType=="button" && elementValue=="OK") 
   {
    var okbutton = oElements[i];

   // alert("typeof okbutton.onclick = "+typeof okbutton.onclick);
    if (typeof okbutton.onclick == "function")
    {
        var previousfunction = okbutton.onclick;

        okbutton.onclick = function()
        {
            if (validateForm())
            {
                previousfunction();
            }
        };

    }
    else
    {
        var aspnetForm = document.getElementById("aspnetForm");
        aspnetForm.attachEvent("onsubmit",validateForm);

         okbutton.onclick = function()
        {
            if (validateForm())
            {
                aspnetForm.submit();
            }
        };
    }


    }
}