【WebのFormのバリデーション】必須項目が未入力でも送信完了してしまう。

前提・実現したいこと

Googleアンケートを、自分のオリジナルサイトに載せるためにカスタマイズ中。
【参考サイト】https://www.yotubarail.work/entry/2019/11/21/121443

アンケートは送信も集計もできたが、最後の
「必須項目が入力されていないとアラートを出す」がうまくいかない。
「日」だけ入力で他が未入力でも、「サンクスページ」に遷移してしまう。

●必須項目はすべて、未入力のときはアラートが出るようにしたい。
●ついでに、日付のアラートもポップアップではなく、すぐ下に出るようにしたい。

試してみたこと

<input type="submit" value="送信" onclick="submitForm()"> → <button type="submit" class="button" onclick="submitForm()">送信</button> にしても、変わりません。

該当のソースコード

html
1<!-- //以下、HTMLの部分 -->
2<div id="formWrapper">
3  <content>
4  <form name="myForm" id="●●●" action="https://docs.google.com/forms/u/1/d/[●●●]/formResponse" target="dummyIframe" method="POST">
5    <div class="q1">
6      <h2>日</h2>
7      <label>
8        <input type="text" id="date" name="entry.●●●" placeholder="▼ 日を選択してください。">
9      </label>
10    </div>
11    <div class="q2">
12      <h2>性別</h2>
13      <ul>
14        <li>
15          <label>
16            <input type="radio" name="entry.●●●" value="male" required="required">男性
17          </label>
18        </li>
19        <li>
20          <label>
21            <input type="radio" name="entry.●●●" value="female" required="required">女性
22          </label>
23        </li>
24      </ul>
25    </div>
26    <div class="q3">
27      <h2>年代</h2>
28      <ul>
29        <li>
30          <label>
31            <input type="radio" name="entry.●●●" value="20" required="required">20代
32          </label>
33        </li>
34        <li>
35          <label>
36            <input type="radio" name="entry.●●●" value="30" required="required">30代
37          </label>
38        </li>
39        <li>
40          <label>
41            <input type="radio" name="entry.●●●" value="40" required="required">40代
42          </label>
43        </li>
44        <li>
45          <label>
46            <input type="radio" name="entry.●●●" value="50" required="required">50代
47          </label>
48        </li>
49        <li>
50          <label>
51            <input type="radio" name="entry.●●●" value="60" required="required">60代
52          </label>
53        </li>
54        <li>
55          <label>
56            <input type="radio" name="entry.●●●" value="70" required="required">70代以上
57          </label>
58        </li>
59      </ul>
60    </div>
61    <div class="q4">
62      <h2>ご質問１</h2>
63      <p>~〜と思いますか？（一つだけ選択）</p>
64      <ul>
65        <li>
66          <label>
67            <input type="radio" name="entry.●●●" value="ぜひ" required="required">ぜひ
68          </label>
69        </li>
70        <li>
71          <label>
72            <input type="radio" name="entry.●●●" value="相談されたら" required="required">相談されたら
73          </label>
74        </li>
75        <li>
76          <label>
77            <input type="radio" name="entry.●●●" value="どちらでもない" required="required">どちらでもない
78          </label>
79        </li>
80        <li>
81          <label>
82            <input type="radio" name="entry.●●●" value="あまり" required="required">あまり
83          </label>
84        </li>
85        <li>
86          <label>
87            <input type="radio" name="entry.●●●" value="絶対に" required="required">絶対に
88          </label>
89        </li>
90      </ul>
91    </div>
92    <div class="q5">
93      <h2>ご質問２</h2>
94      <p>〜いましたか？（一つだけ選択）</p>
95      <ul>
96        <li>
97          <label>
98            <input type="radio" name="entry.●●●" value="とても綺麗だった" required="required">とても綺麗だった
99          </label>
100        </li>
101        <li>
102          <label>
103            <input type="radio" name="entry.●●●" value="まあまあ綺麗だった" required="required">まあまあ綺麗だった
104          </label>
105        </li>
106        <li>
107          <label>
108            <input type="radio" name="entry.●●●" value="ふつう" required="required">ふつう
109          </label>
110        </li>
111        <li>
112          <label>
113            <input type="radio" name="entry.●●●" value="やや汚れていた" required="required">やや汚れていた
114          </label>
115        </li>
116        <li>
117          <label>
118            <input type="radio" name="entry.●●●" value="汚かった" required="required">汚かった
119          </label>
120        </li>
121      </ul>
122    </div>
123    <div class="q6">
124      <h2>ご質問３</h2>
125      <p>〜でしたか？（一つだけ選択）</p>
126      <ul>
127        <li>
128          <label>
129            <input type="radio" name="entry.●●●" value="全く待たなかった" required="required">全く待たなかった
130          </label>
131        </li>
132        <li>
133          <label>
134            <input type="radio" name="entry.●●●" value="あまり待たなかった" required="required">あまり待たなかった
135          </label>
136        </li>
137        <li>
138          <label>
139            <input type="radio" name="entry.●●●" value="少し待った" required="required">少し待った
140          </label>
141        </li>
142        <li>
143          <label>
144            <input type="radio" name="entry.●●●" value="とても待った" required="required">とても待った
145          </label>
146        </li>
147      </ul>
148    </div>
149    <div class="q7">
150      <h2>ご質問４</h2>
151      <p>〜をお聞かせください。</p>
152      <ul>
153        <li>
154          <label>
155            <input type="checkbox" name="entry.●●●" value="あ">あ
156          </label>
157        </li>
158        <li>
159          <label>
160            <input type="checkbox" name="entry.●●●" value="い">い
161          </label>
162        </li>
163        <li>
164          <label>
165            <input type="checkbox" name="entry.●●●" value="う">う
166          </label>
167        </li>
168        <li>
169          <label>
170            <input type="checkbox" name="entry.●●●" value="え">え
171          </label>
172        </li>
173        <li>
174          <label>
175            <input type="checkbox" name="entry.●●●" value="お">お
176          </label>
177        </li>
178        <li>
179          <label>
180            <input type="checkbox" name="entry.●●●" value="か">か
181          </label>
182        </li>
183        <li>
184          <label>
185            <input type="checkbox" name="entry.●●●" value="き">き
186          </label>
187        </li>
188      </ul>
189    </div>
190    <div class="q8">
191      <h2>ご質問５</h2>
192      <p>最後に、〜をお聞かせください。</p>
193      <label>
194        <textarea id="imprest" name="entry.●●●" cols="40" rows="4" maxlength="20" placeholder="自由にご記入ください。"></textarea>
195      </label>
196      <p>その他、ご記入ください。</p>
197      <label>
198        <textarea id="imprest" name="entry.●●●" cols="40" rows="4" maxlength="20" placeholder="自由にご記入ください。"></textarea>
199      </label>
200    </div>
201    <div class="wrap">
202      <input type="submit" value="送信" onclick="submitForm()">
203    </div>
204  </form>
205  <iframe name="dummyIframe" style="display:none;"></iframe>
206</div>
207<!-- formRapper -->
208<div id="thxMessage" style="display:none;">
209  <!-- 回答すると出るページ -->
210  <div class="prezent_box">
211    <p>アンケートのご回答、
212      <br>誠にありがとうございます。
213    </p>
214  </div>
215</div>
216
217<!-- //以下、scriptのバリデーション部分 -->
218<script>
219function submitForm() {
220  var val = document.getElementsByName("entry.●●●")[0];
221  if (val.value.length == 0) {
222    alert("日/性別/年代/ご質問１〜３は、必須項目です。");
223    val.focus();
224    return;
225  }
226  var val = document.getElementsByName("entry.●●●")[0];
227  if (val.value.length == 0) {
228    alert("性別は必須項目です");
229    val.focus();
230    return;
231  }
232  var val = document.getElementsByName("entry.●●●")[0];
233  if (val.value.length == 0) {
234    alert("年代は必須項目です");
235    val.focus();
236    return;
237  }
238  var val = document.getElementsByName("entry.●●●")[0];
239  if (val.value.length == 0) {
240    alert("ご質問１は必須項目です");
241    val.focus();
242    return;
243  }
244  var val = document.getElementsByName("entry.●●●")[0];
245  if (val.value.length == 0) {
246    alert("ご質問２は必須項目です");
247    val.focus();
248    return;
249  }
250  var val = document.getElementsByName("entry.●●●")[0];
251  if (val.value.length == 0) {
252    alert("ご質問３は必須項目です");
253    val.focus();
254    return;
255  }
256  document.myForm.submit();
257  document.getElementById('formWrapper').style.display = 'none';
258  document.getElementById('thxMessage').style.display = 'block';
259}
260</script>
261
262

m.ts10806

2020/04/22 05:25

インデント調整いただけますか？特にJavaScript スコープが見えづらいです。

m.ts10806

2020/04/22 05:26

念のためボタンタイプをbuttonにしてみては。

Octor

2020/04/22 07:21

回答感謝いたします。インデント調整し、見やすくしました！ buttonにしても結果変わらずでした。。

Octor

2020/04/24 01:37

すみません、buttonタイプの変更をしても変わりませんでした。まだ治りません????　どなたか、分かる方いましたらご教示願います。

Yousuck

2020/05/01 04:01

全ての inputの nameプロパティが entry.●●● ですが、これはあえてそのようになさっているのですよね？※伏せる必要性がないと思われますので、編集されているコードそのものをご提示頂いたほうが良いかと思います。あと、現状ご提示頂いているコードを見る限りではcheckboxやradioボタンのcheckedプロパティを判定せず、セットしているvalueプロパティを取得しているだけなので条件文は通っちゃいますよ。

Octor

2020/05/07 09:47

Yousuckさんご回答ありがとうございます。一から作り直しているところです。もし治りましたら、追記いたします。アドバイス大変助かりました！