somemo programming etc.

プログラマ、雑記、プログラミング関係はLinkから、数式はこっちでまとめていることが多い

【Javascript】フォームのサブミット時のイベント

すぐに忘れてしまうのでメモ。

フォームをサブミットしたいが、フォームに囲まれている要素の入力チェックをしたい場合のお話です。

サブミットボタンに対して、onclickイベントを使用して入力チェックを行っても、サブミットが実行され遷移してしまいます。そんなときはonsubmitイベントです。

onsubmit

名前のとおり、サブミット時のイベントです。サブミットボタンを押下したとき、フォームに囲まれたinput要素にフォーカスが当たっているときにEnterキーを押した場合など、にイベントとして発生します。

このイベントに対して、Javascriptの関数を割り当てて入力チェックを行います。

記述

以下のように記述して実行します。

<form action="test.html" onsubmit="return validateFunc();">
<!-- input要素など -->
</form>

イベントに割り当てた関数の戻り値をさらにリターンで返します。この値がtrueのときにサブミット実行となり、falseの場合は中止します。

onclick時の問題点

上記の解決法を知らなかったころは、サブミットボタンの変わりにボタンを使用し、そのボタンのonclikイベントにJavascript関数を割り当てていました。関数の中で入力チェックを行い、入力チェック完了後にフォームをサブミットしていました。

この場合、Javascriptがoffになっていると遷移できなくなってしまいます。また、サーバでの最終的な入力チェックをするたのも面倒です。Javascriptがoffのときにonsubmit版が動くか試していませんが・・・以上です。