送信ボタンにonclickが効かない

Question

前提・実現したいこと

submitボタンが押されたら、入力チェックを行い、空白であれば送信せずalertをだすプログラムを書きたいです。

発生している問題

送信ボタンを押すと入力チェックを行わず、送信先のページに飛ばされてしまします。

該当のソースコード

	<form method="post" action="add.php">
		<div>
			<div>ログインIDを入力してください：<font color="red">必須</font></div>
			<div>※メールアドレス</div>
			<div><input type="email" name="email" id="email"></div>
			<br>
			<div>パスワードを登録してください：<font color="red">必須</font></div>
			<div>※半角英数8文字以上32文字以内</div>
			<div><input type="password" name="password" id="password"></div>
			<br>
			<div>パスワードを登録(確認用)してください：<font color="red">必須</font></div>
			<div>※半角英数8文字以上32文字以内</div>
			<div><input type="password" name="password_check" id="password_check"></div>
			<br>
			<div>ニックネームを入力してください：<font color="red">必須</font></div>
			<div>※全角半角英数字</div>
			<div><input type="text" name="name" id="name"></div>
			<br>
			<input type="submit" name="submit" value="登録確認" id="submit">
		</div>
	</form>
	<script type="text/javascript" src="js/form.js"></script>

function check(){
	$("#submit").on('click',() => {
		alert("送信ボタンがクリックされました");
		var flag = 0;

		if($("#email").val() === ""){
			flag = 1;
		}

		else if($("#password").val() === ""){
			flag = 1;
		}

		else if($("#password_check").val() === ""){
			flag = 1;
		}

		else if($("#name").val() === ""){
			flag = 1;
		}


		if(flag){
			window .alert('必須項目に未入力がありました'); // 入力漏れがあれば警告ダイアログを表示
			return false; // 送信を中止
		} else {
			return true; // 送信を実行
		}
	});
}

試したこと

onclickをしたら、alertで処理されてるか確認しましたが、alertさえも出ません。
解決方法を教えていただきたいです。

Answer 1

function check() {
  // 中略
}

check(); // これが必要

https://codepen.io/anon/pen/MGKdXM

Comments

[terakun]

関数を作っといて実行をしていなかったのですね。回答ありがとうございました。

Answer 2

まずはrequiredを実装してブラウザにまかせてみて、
気に入らないなら拡張するとよいでしょう

Comments

[terakun]

requiredで入力チェックができることを今知りました。勉強になります。回答ありがうございました。

Answer 3

そもそもfunction check()自体不要では？

追記:
あとsubmitボタンなのでsubimtを止める必要があります。

• event.preventDefault

止めた後は今　return true;　としているところでform.submit()はしてください。

Comments

[terakun]

関数化する必要性はありませんでした。回答ありがとうございました。

[m.ts10806]

どちらにしてもevent.preventDefaultは必要に思いますが。

Answer 4

フォームのsubmit部分にonclickイベントをつけてみてはいかがでしょう？
参考までにURLを載せておきます。

http://www.hp-stylelink.com/news/2013/08/20130827.php

Comments

[terakun]

原因が他のことでした。それでもイベント処理できますね！回答ありがとうございました。