return falseできない

###前提・実現したいこと
jqueryを使ってフォームを作ろうと思って書いたのですが、なぜかreturn falseがうまく動いてキャンセルしてくれません。スペルなどをチェックしましたが、どこが悪いのかさっぱりわかりません。どうかよろしくおねがいします。

###発生している問題・エラーメッセージ

return falseでキャンセル処理が行えませんでした。
エラーメッセージはまったく出ませんでした。

###該当のソースコード

HTML
1<!doctype html>
2<html>
3<head>
4<meta charset='utf-8'>
5<title></title>
6<style>
7body{
8margin:0;
9}
10</style>
11</head>
12<body>
13<form id='form'>
14<input type='text'>
15<input type='text'>
16<input type='text'>
17<input type='text'>
18<input type='submit'>
19</form>
20<script src="jquery.js"></script>
21<script>
22$('#form').submit(function () {
23 $('input[type=text]').each(function () {
24  if ($(this).val() == '') {
25  alert('空です')
26  return false;
27 }
28})
29})
30</script>
31</body>
32</html>

###試したこと
Google検索
###補足情報(言語/FW/ツール等のバージョンなど)
windows8、html5、css3、jqueryなど、

kei344

2017/05/03 15:42

バッククオート3つの前後には改行を入れてください。記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。

行動規範の内容に同意します

回答2件

ベストアンサー

each関数中でreturn falseを返した場合、ループを抜けることができますが、submitの中止は行われません。以下のように行うと質問者さんの実現したいことが行えると思いますが、いかがでしょうか？

HTML
1<!doctype html>
2<html>
3<head>
4    <meta charset='utf-8'>
5    <title>タイトル</title>
6    <style>
7        body {
8            margin: 0;
9        }
10    </style>
11</head>
12<body>
13<form id='form'>
14    <input type='text'>
15    <input type='text'>
16    <input type='text'>
17    <input type='text'>
18    <input type='submit'>
19</form>
20<script src="jquery.js"></script>
21<script>
22    $('#form').submit(function () {
23        var flag = true;
24        $('input[type=text]').each(function () {
25            if ($(this).val() == '') {
26                alert('空です');
27                flag = false;
28                return false;
29            }
30        });
31        return flag;
32    });
33</script>
34</body>
35</html>