JavaScriptでFormに空欄がある時alertを出して送信を止めたい。

初心者でスクールの教材と、ネットで調べながら色々やってみています。
Formに空欄があるときにalertを表示して送信を止めたいのですが、送信が成功してしまいます。
書いたコードはこれです。

HTML
1
2    <body>
3        <main>
4            <article>
5                <section id="contact">
6                    <h2 class="h2">お問い合わせ</h2>
7                    <form name="textFrom" action="https://api.staticforms.xyz/submit" method="post" onsubmit="check()">
8                        <input type="text" name="honeypot" style="display:none">
9                        <input type="hidden" name="accessKey" value="">
10                        <input type="hidden" name="subject" value="Webサイトからお問い合わせがありました">
11                        <input type="hidden" name="replyTo" value=""> 
12                        <input type="hidden" name="redirectTo" value="">     
13                        <div>
14                            <div id="contact-heading">
15                                <label class="contact-label">お名前</label>
16                            </div>
17                            <div class="contact-form">
18                                <input type="text" name="name" placeholder="入力してください" class="contact-textbox">
19                            </div>
20                            <div id="contact-heading">
21                                <label class="contact-label">メールアドレス</label>
22                            </div>
23                            <div>
24                                <input type="text" name="email" placeholder="入力してください" class="contact-textbox">
25                            </div>
26                            <div class="contact-heading">
27                                <label class="contact-label">電話番号</label>
28                            </div>
29                            <div>
30                                <input type="text" name="tel" placeholder="入力してください" class="contact-textbox">
31                            </div>
32                        </div>
33                        <div>
34                            <div class="contact-heading">
35                                <label class="contact-label">お問い合わせ内容</label>
36                            </div>
37                            <div>
38                                <textarea class="contact-textarea" placeholder="入力してください" name="message"></textarea>
39                            </div>
40                        </div>
41                        <div>
42                            <div class="contact-heading">
43                                <label class="contact-label">ご連絡方法</label>
44                            </div>
45                            <div>
46                              <input class="radiobutton" type="radio" value="tel" name="contact" checked><label>お電話</label>
47                              <input class="radiobutton" type="radio" value="mail" name="contact"><label>メール</label>
48                              <input class="radiobutton" type="radio" value="both" name="contact"><label>どちらでも</label>
49                            </div>
50                        </div>
51                            <button id="submit-btn" type="submit" id="button">送信</button>
52                    </form>
53                </section>
54            </article>
55            <footer>
56                <div id="footer-link">
57                    <a href="introduction.html">Introduction</a>
58                    <a href="portfolio.html">Portfolio</a>
59                    <a href="contact.html">Contact</a>
60                </div>
61                <span id="copylight">&copy;2022 All Rights Reserved.</span>
62            </footer>
63        </main>
64        <script src="js/contact.js"></script>
65    </body>

Javascript
1function check() {
2    if(document.forms.name.value ==""){
3        alert("お名前を入力してください");
4        return false;
5    }
6    if(document.forms.email.value ==""){
7        alert("メールアドレスを入力してください")
8        return false;
9    }
10    if(document.forms.tel.value ==""){
11        alert("電話番号を入力してください")
12        return false;
13    }
14    if(document.forms.message.value ==""){
15        alert("お問い合わせ内容を入力してください")
16        return false;
17    }
18};

googleで調べて
onsubmit="return check()"
にすると正常に動くなど見たのですが、returnの部分に赤の二重線が出てくるだけで、うまく動きません。

送信ボタンを押すとconsole画面にuncoughtと表示され、送信完了画面に切り替わります。

どなたかどうすれば良いか分かる方いましたら教えていただきたいです。

int32_t

2022/05/02 03:28

実行時にブラウザの開発者ツールのコンソールにエラーが出ていませんか?

0re0

2022/05/02 03:36

一瞬uncoughtと出て、画面が切り替わってGET https://api.staticforms.xyz/favicon.ico 403と出ます

int32_t

2022/05/02 03:44

その uncought のエラーメッセージが問題解決にとてもとても重要なので、質問文に転記してください。

int32_t

2022/05/02 03:47

もし一瞬で消えてしまうようなら、関数 check() の冒頭にブレークポイントを付けてステップ実行してみてください。

m.ts10806

2022/05/02 03:55

コードはマークダウンのcodeを利用してご提示ください。また、ボタンタイプをbuttonにしてボタンのクリックイベントにして試してみてください（送信はされなくなりますが動作確認と問題切り分けにはなります）

0re0

2022/05/02 04:03

buttonのtypeをbuttonにしてみるということでしょうか？

m.ts10806

2022/05/02 04:11

はい。

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

回答1件

ベストアンサー

普通は必須項目にrequired属性を付けますが、任意に処理をしたいのであれば
こんな感じで

javascript
1<script>
2document.addEventListener('submit',e=>{
3  const req=[...e.target.querySelectorAll('[data-required]')];
4  const empty=req.filter(x=>x.value=="");
5  const list={"name":"お名前","email":"メールアドレス","tel":"電話番号","message":"お問い合わせ内容"};
6  if(req && empty){
7    empty[0].focus();
8    alert(list[empty[0].name]+'を入力してください');
9    e.preventDefault();
10  }
11});
12</script>
13
14<form>
15<input type="text" name="name" data-required="1"><br>
16<input type="text" name="email" data-required="1"><br>
17<input type="text" name="tel" data-required="1"><br>
18<textarea name="message" data-required="1"></textarea><br>
19<input class="radiobutton" type="radio" value="tel" name="contact" checked><label>お電話</label>
20<input class="radiobutton" type="radio" value="mail" name="contact"><label>メール</label>
21<input class="radiobutton" type="radio" value="both" name="contact"><label>どちらでも</label><br>
22<button id="submit-btn" type="submit" id="button">送信</button>
23</form>