JavaScriptにおけるフォーム送信の禁止

必要に応じて、フォームの送信を禁止することができます。これは、すでにご存知のpreventDefaultを通じて行います。例を見てみましょう。

次のようなフォームがあるとします：

<form action="/handler/" method="POST">
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

変数にその参照を取得します：

let form = document.querySelector('form');

フォームの送信は、イベントsubmitを通じて捕捉できます：

form.addEventListener('submit', function() {
	
});

では、フォームの送信を禁止してみましょう：

form.addEventListener('submit', function(event) {
	event.preventDefault();
});

入力フィールドを持つフォームが与えられています。送信を試みた際に、入力フィールドに入力された値が正しいemailかどうかを確認してください。正しくない場合、フォームの送信を禁止し、その旨のメッセージを表示してください。