JavaScriptのpreventDefault()について

前提

ここに質問の内容を詳しく書いてください。
（例）
JavaScriptでフォームの入力エラーを確認する画面を作っています。入力が空の場合にエラーメッセージは正しく表示されているのですが入力がある場合に「formがpost」されずに困っています・・・。何か記述が足りませんでしょうか？

実現したいこと

入力がある状態で送信ボタン（submit）を押すと「formがpostされる」ようにしたい

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

送信ボタンを押しても読み込まれません（formをpostすることができない）。

該当のソースコード

html
1<form action="" method="POST">
2    <table>
3        <tbody>
4            <tr>
5                <th><label for="name">お名前</label></th>
6                <td><input type="text" name="name" id="name" placeholder="山田太郎"></td>
7            </tr>
8            <tr>
9                <th><div class="err-msg-name"></div></th>
10                <td><input type="submit" class="submit"></td>
11            </tr>
12        </tbody>
13    </table>
14</form>

javascript
1window.addEventListener('DOMContentLoaded', () => {
2
3    const submit = document.querySelector('.submit');
4    
5    submit.addEventListener('click', (e) => {
6        e.preventDefault();
7
8        const name = document.querySelector('#name');
9        const errMsgName = document.querySelector('.err-msg-name');
10        if(!name.value){
11            errMsgName.classList.add('form-invalid');
12            errMsgName.textContent = 'お名前が入力されていません';
13            name.classList.add('input-invalid');
14            return;
15        }else{
16            errMsgName.textContent ='';
17            name.classList.remove('input-invalid');
18        }
19
20    }, false);
21}, false);

Cocode

2022/09/24 15:55

「postされる」とは具体的にどういった意味でしょうか？フォームの内容が送信されてサーバーやデータベースに保存されるということでしょうか？

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

回答1件

ベストアンサー

質問者さまからの補足説明を聞き、内容を一新しました。

前提条件の確認

質問で提示されているHTMLはPHPファイルの中に書かれている。
そのPHPファイルそのものに、フォーム送信時の処理が書かれている。
- そのため<form action="">の中身は空とする。
- そうすると、指定のファイルではなく、そのファイルそのもののPHPコードを実行してくれる。
フォームがかかれているPHPファイルのPHPコードで処理してフォームの内容をPostしたい。

解決策

質問者さま自身お気づきの通り、event.preventDefault()が原因です。
これによりデフォルトの送信するという処理が停止されています。
ですので停止された処理を、再度実行してやる必要があります。
具体的にはForm.send()を使います。

＜記述例＞

javascript
1FORM.addEventListener('submit', event => { // フォームが送信される時にイベント発火
2    // デフォルトの送信処理を停止
3    event.preventDefault();
4
5    // 何か処理して
6    nanika();
7
8    // デフォルトの送信を行う
9    FORM.submit();
10});

コード例

以上を踏まえたコードのサンプルです。デモページも用意しましたので併せてご覧ください。

Demo on JSFiddle
- PHPがありませんので、送信処理がされたらエラーページに飛びます（それで成功です）。

html
1<form action="" method="POST" name="form">
2  <table>
3    <tbody>
4      <tr>
5        <th><label for="name">お名前</label></th>
6        <td><input type="text" name="name" id="name" placeholder="山田太郎"></td>
7      </tr>
8      <tr>
9        <th><p id="err-msg-name"></p></th>
10        <td><input type="submit" value="Submit"></td>
11      </tr>
12    </tbody>
13  </table> 
14</form>

javascript
1window.addEventListener('DOMContentLoaded', () => {
2
3  // 他でも再利用するかもしれないので、ひとまずここで要素を全て取得してみました
4  const form = document.form;
5  const inputName = document.form.name;
6  const errMsgName = document.querySelector('#err-msg-name');
7
8  // 繰り返し使用するclass名は変数にいれておくとよいです。
9  // そうすると、class名に変更があっても、この一箇所を修正するだけで済みます。
10  let classFormInvalid = 'form-invalid';
11  let classInputInvalid = 'input-invalid';
12
13  let isValid = false; // Formの有効・無効状態を管理する変数（初期値：無効）
14
15  // Formが送信された時のイベント
16  form.addEventListener('submit', event => {
17    event.preventDefault();
18
19    validateForm(); // バリデーション実行
20    if (!isValid) return; // Formが無効状態の場合、ここで処理を終了（以降の行は読み込まれない）
21
22    form.submit(); // Formが有効の場合のみ、デフォルトの送信処理を行う
23  });
24  
25  /**
26    * 入力欄を検証する関数
27    */
28  function validateForm() {
29    if (inputName.value.isEmpty()) { // 入力欄が無記入の場合
30      errMsgName.classList.add(classFormInvalid);
31      errMsgName.textContent = 'お名前を入力してください';
32      inputName.classList.add(classInputInvalid);
33      isValid = false; // Formの状態を無効にする
34      return; // ここで処理を終了（以降の行は読み込まれない）
35    } else { // 入力されている場合
36      errMsgName.classList.remove(classFormInvalid);
37      errMsgName.textContent = '';
38      inputName.classList.remove(classInputInvalid);
39      isValid = true; // Formの状態を有効にする
40    }
41  }
42}, false);
43
44/**
45 * 文字がないことを判定するStringメソッド（空白のみの入力も、文字がないと判定する）
46 * @return {boolean} 文字がないときtrue / 文字があるときfalse
47 */
48String.prototype.isEmpty = function() {
49  return this.trim() === '';
50}
51// 上記のコードではこのメソッドを1度しか使っていませんが、
52// 今後再利用できそうなのでStringオブジェクトのメソッドとして作成しました。

空白（スペース）のみの入力でもOK判定されていたので、空白のみは不可判定となるようメソッドを追加
その他、軽微な変更を行いました

投稿2022/09/24 16:58

編集2022/09/27 00:56

Cocode

総合スコア2314

SUZANNU

2022/09/25 00:58

ご回答ありがとうございます！入力されている場合は、action="" method="POST"を実行したいのですが送信ボタンを押しても入力内容を読み込むことができず困っています。 action=""は空白にしていると、自分自身のphpファイルを読み込んで valueの内容（inputに入力したもの）をpostしてくれると思っているのですが間違っていますか？・入力内容が空の場合＝JavaScriptでエラーメッセージを出す・入力内容がある場合＝JavaScriptを動作させずformをpostするということができれば嬉しいです。ご入力いただい分を試してみたのですが、入力内容がある場合に inputのvalueをformに送信できない状態でformが動かないです。どのようにすればよいかわかれば助かります。。

Cocode

2022/09/25 11:04 編集

https://jsfiddle.net/y7regd96/6/ ↑一度このコードをコピペして試していただいてもいいですか？HTMLとJS両方変更しています。無事できましたらよかったら教えてください！回答を編集して詳細を解説します〜変更箇所は、・HTMLにてform要素と送信ボタン要素にname属性をつけて、・JSで要素を取得するときはname属性から取得して、・送信時に .reset() のかわりに .requestSubmit() して、送信するようにしました。

SUZANNU

2022/09/25 15:04

修正ありがとうございます！早速試してみました！空のときはしっかりと「お名前が入力されていません」と表示されています。この点は修正前も同じでしたので問題なさそうです。ただ、入力があった場合に「action」が動く気配はなく、何も起こりません。記述として「action=""」があるので、入力があれば自分自身（たとえばtest.php）が再読込みされるはずですよね？（これをformをpostしたいと言っていました。素人な表現でわかりにくく申し訳ございません）「action=""」としても「action="test.php"」とするのも同じだと思うので「action=""」としています。・入力が空ならエラーを表示（JavaScriptでメッセージ）・入力が空じゃなければtest.phpのformがsubmitされる（formが通常にphp内で動作）ページが読み込まれる？というシンプルな仕組みにしたいだけなのですがJavaScriptってすごくむずかしいんですね。。もっと簡単にできると思っていたので、想像以上に複雑で驚きました・・・。勉強不足ですみません。

SUZANNU

2022/09/25 15:08 編集

あといただいた内容のコピペ結果の補足として下記のエラーも表示されていました。 test.php:52 Uncaught TypeError: submit.requestSubmit is not a function at HTMLInputElement.<anonymous> ちなみに「test.php」の52行目には下記があります。 submit.requestSubmit(); JavaScriptすごく難しいですが、使えるようになったら楽しそうですね！

Cocode

2022/09/25 18:22 編集

簡易版つくってみたのでこちらのHTML、JSコピペして試していただいてもいいですか？お手数をおかけします。 https://jsfiddle.net/f182vjoa/8/

Cocode

2022/09/25 18:52 編集

完成版もできました。コピペして検証お願いします。必ずHTML、JS両方コピペしてください。 https://jsfiddle.net/ujf31pwv/39/ 簡易版ではうまくいったのに完成版ではずっとエラーで、原因がわからなくて、htmlをコピペではなく全部最初から打ち直したらいけました。おそらく目に見えない何か不純物が混じっていたのだと思います。（コーディングしてるとたまにあります）

SUZANNU

2022/09/26 00:42 編集

簡易版と完成版ありがとうございます！両方コピペして試してみます！不純物が入ると動かないんですね。。。少しでも記述間違いがあると動作しないようなので素人にはハードルが高く苦戦しています・・・ jsfiddleという画面での完成版はしっかりと理想通りに動いていました！ constとletの違いもあまりわかっていない状態ですがコードにメモを入れてもらっている点も助かります。何度も回答していただき本当にありがとうございます！もう少しテストしてみて動くかどうか試してみますね。

Cocode

2022/09/26 01:02 編集

constは定数で、最初に宣言したら後から値が変更できません。 letは変数で、昔のvarと同じく、宣言したあとも値の変更ができます。長いコードを書いていると意図せず変更したくない値を変更してしまうこともありますので、それを防止するためにconstを使います。テスト結果をハラハラしながらお待ちしております。

SUZANNU

2022/09/26 09:44 編集

テストした結果、無事動きました！！！ constとletの使い分けまで教えていただきありがとうございます！ varの方が記事ではよく見かけた気もするのですが今の主流はconstとletなんですね。。。この機会にJavaScriptを少しは使えるようになりたいのでまずはこの３つの意味を調べてみたいと思います！何度もご教授いただき本当に助かりました。ご丁寧に教えていただけたおかげで JavaScriptが好きになりました！！ありがとうございました！！！

Cocode

2022/09/26 10:04

PHPがもしお分かりでしたら、似てるのでとっつきやすいと思いますよー！好きになっていただけたなんて最高の褒め言葉です。ありがとうございます。私もまだまだ初心者なので精進します。回答の内容をこれまでのやりとりを踏まえて一新しました。今後このページに到達される誰かのお役に立ちますように。

SUZANNU

2022/09/26 11:16

今回色々とご教授いただいてなんとなく似ているなぁと思っていました！これを機会にしっかりと学んでみたいと思います。きっかけをいただき感謝です。また、記述内容を調整していただき本当にありがとうございます。多くの方の役に立つページになれば私としてもすごく嬉しいです！！！本当にお世話になりました！ありがとうございました！！！

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