フォーム送信中止の「return false」を関数化すると中止されない

Question

いつもお世話になっております。
フォームのバリデーション機能を実装したいと思っています。

初歩的な質問で恐れ入りますが、return falseを直接イベントリスナーに入れた際はフォーム送信が中止できるのに、関数化してしまうとフォーム送信の中止ができません。

これは関数にreturn falseを入れてしまうと、該当の関数の処理を止める事はできても、フォーム送信中止ができないのかと思ったのですが、認識は合っていますでしょうか？

バリデーションを複数回呼び出したいので関数化したのですが、この部分がはっきりと分からないため質問させていただきました。

分かる方がいらっしゃいましたら、ご教授いただけると大変嬉しいです。
どうぞよろしくお願いいたします。

const validation = () => {
	return false;
};

$(function(){
	$('#submit_button').on('click', () => {
		validation();
	});
});

Answer 1

validation メソッドの中で何らかの検証を行い、検証結果 OK なら form を submit し、検証 NG なら submit しないということがやりたいのですよね？

であれば、validation メソッドが検証結果に応じた戻り値を持つよう手を加えて、例えば検証結果 OK なら true を、検証 NG なら false を返すようにし、

$('#submit_button').on('click', () => {
    return	validation();
});

としてはいかがですか。

Comments

[harumaki_mochi]

SurferOnWww 様

ご回答頂きましてありがとうございます。

また、私が実装したい内容について、完結に纏めてくださりありがとうございます。
説明不足で大変失礼いたしました。今後はもっとわかりやすく質問できるように気をつけたいと思います。

詳しく教えてくださったおかげで、
validation メソッド内の記述も上手く書くことができました。

ちなみにですが、私の記述で上手く送信中止出来なかった理由については、
どの部分になるのでしょうか。

他の回答者様にもすでにお伺いしているのですが、SurferOnWww 様のご意見も頂きたいと思い、このように続けての質問となってしまいました。
もし差し支えなければご教授頂けたら助かります。

[退会済みユーザー]

> ちなみにですが、私の記述で上手く送信中止出来なかった理由については、どの部分になるのでしょうか。

質問に書いてあった以下のコードのことですよね？

> $('#submit_button').on('click', () => {
> validation();
> });

クリックイベントのリスナ内で validation メソッドを起動して、validate メソッドは false を返すものの、クリックイベントのリスナはその戻り値 false を返していないということで、submit_button クリックの既定の動作 (form を submit) が止まらなかったということでしょう。

[harumaki_mochi]

SurferOnWww 様

お忙しいところご回答頂きありがとうございます。
ご返信が遅くなり申し訳ありません。

戻り値をちゃんと渡してあげられていなかったために、機能していなかったのですね。
今回もご丁寧な解説をありがとうございます。

追加の質問までご回答頂き、本当にありがとうございました。
やりたいことが自分の力で出来るように精進していきたいと思います。

Answer 2

	$('#submit_button').on('click', validation);

または

	$('#submit_button').on('click', () => {
		return validation();
	});

と書いてください。on()の引数に指定した関数がreturn で値を返す必要があります。

Comments

[harumaki_mochi]

int32_t 様

ご回答頂きましてありがとうございます。

教えてくださった内容で送信中止が実装できました。
2種類の方法にて教えてくださり、ご丁寧にありがとうございました。

ちなみにですが、私が元々書いていた関数化する方法では、
どの部分に問題があるのでしょうか。

送信中止出来ない理由について知りたいのですが、
私の調べ方では理解まで及ばず…

問題は解決したのですが、もしお時間が許すようであれば、
お手隙の際にご確認頂けると幸いです。

[int32_t]

> 送信中止出来ない理由について知りたいのですが、

回答に書いた通りで、送信中止するためにはon()の引数に指定した関数がreturnでfalseを返す必要があります。
質問文にあるコードではon()の引数に指定したアロー関数に return がありません。

[harumaki_mochi]

int32_t 様

お忙しいところご回答頂きありがとうございます。
ご返信が遅くなり申し訳ありません。

returnで値を返してあげられていなかったのがいけなかったんですね。
引数の考え方が自分の中でまだまだ課題なので、もっと勉強したいと思います。

この度は最後までご丁寧にありがとうございました。