teratail
回答率
85.47%
質問するログイン新規登録
トップJavaScriptに関する質問JavaScriptのpreventDefault()について

編集履歴

回答編集履歴

3

コードのisValid逆の意味に間違っていたので修正

2022/09/27 00:56

投稿

Cocode
Cocode

スコア2314

test CHANGED
@@ -29,7 +29,7 @@
29
29
 
30
30
  ### コード例
31
31
  以上を踏まえたコードのサンプルです。デモページも用意しましたので併せてご覧ください。
32
- - [Demo on JSFiddle](https://jsfiddle.net/czj2ved0/)
32
+ - [Demo on JSFiddle](https://jsfiddle.net/2c5e1L4v/)
33
33
  - PHPがありませんので、送信処理がされたらエラーページに飛びます（それで成功です）。
34
34
 
35
35
  ```html
@@ -61,14 +61,14 @@
61
61
  let classFormInvalid = 'form-invalid';
62
62
  let classInputInvalid = 'input-invalid';
63
63
 
64
- let isValid = true; // Formの有効・無効状態を管理する変数
64
+ let isValid = false; // Formの有効・無効状態を管理する変数（初期値：無効）
65
65
 
66
66
  // Formが送信された時のイベント
67
67
  form.addEventListener('submit', event => {
68
68
  event.preventDefault();
69
69
 
70
70
  validateForm(); // バリデーション実行
71
- if (isValid) return; // Formが無効状態の場合、ここで処理を終了（以降の行は読み込まれない）
71
+ if (!isValid) return; // Formが無効状態の場合、ここで処理を終了（以降の行は読み込まれない）
72
72
 
73
73
  form.submit(); // Formが有効の場合のみ、デフォルトの送信処理を行う
74
74
  });
@@ -81,13 +81,13 @@
81
81
  errMsgName.classList.add(classFormInvalid);
82
82
  errMsgName.textContent = 'お名前を入力してください';
83
83
  inputName.classList.add(classInputInvalid);
84
- isValid = true; // Formの状態を無効にする
84
+ isValid = false; // Formの状態を無効にする
85
85
  return; // ここで処理を終了（以降の行は読み込まれない）
86
86
  } else { // 入力されている場合
87
87
  errMsgName.classList.remove(classFormInvalid);
88
88
  errMsgName.textContent = '';
89
89
  inputName.classList.remove(classInputInvalid);
90
- isValid = false; // Formの状態を有効にする
90
+ isValid = true; // Formの状態を有効にする
91
91
  }
92
92
  }
93
93
  }, false);

2

内容一新

2022/09/26 09:56

投稿

Cocode
Cocode

スコア2314

test CHANGED
@@ -1,13 +1,39 @@
1
- ### 「実現したいこと」の確認
1
+ **質問者さまからの補足説明を聞き、内容を一新しました。**
2
- 「Postされる」とは具体的にどういう意味でしょうか？サーバーやデータベースなどに送信されるということでしょうか？でしたらこのコードでは難しいと思います。
3
2
 
3
+ ### 前提条件の確認
4
+ - 質問で提示されているHTMLはPHPファイルの中に書かれている。
5
+ - そのPHPファイルそのものに、フォーム送信時の処理が書かれている。
6
+ - そのため`<form action="">`の中身は空とする。
7
+ - そうすると、指定のファイルではなく、そのファイルそのもののPHPコードを実行してくれる。
8
+ - フォームがかかれているPHPファイルのPHPコードで処理してフォームの内容をPostしたい。
9
+
10
+ ### 解決策
11
+ 質問者さま自身お気づきの通り、`event.preventDefault()`が原因です。
12
+ これによりデフォルトの送信するという処理が停止されています。
13
+ ですので停止された処理を、再度実行してやる必要があります。
14
+ 具体的には`Form.send()`を使います。
15
+
16
+ ##### ＜記述例＞
17
+ ```javascript
4
- そうではなく、ただたんに送信したふりをして、入力内容をリセットしたいというだけであれば、`form.reset()`で入力内容を全て削除することができます。
18
+ FORM.addEventListener('submit', event => { // フォームが送信される時にイベント発火
19
+ // デフォルトの送信処理を停止
20
+ event.preventDefault();
21
+
22
+ // 何か処理して
23
+ nanika();
24
+
25
+ // デフォルトの送信を行う
26
+ FORM.submit();
27
+ });
28
+ ```
5
29
 
6
30
  ### コード例
7
- デモページを用意しましたので、よろしければ実際に触ってみてください。
31
+ 以上を踏まえたコードのサンプルです。デモページも用意しましたので併せてご覧ください。
8
- - [デモ on JSFiddle](https://jsfiddle.net/kn5vp74o/)
32
+ - [Demo on JSFiddle](https://jsfiddle.net/czj2ved0/)
33
+ - PHPがありませんので、送信処理がされたらエラーページに飛びます（それで成功です）。
34
+
9
35
  ```html
10
- <form action="" method="POST" id="form"><!-- idつけました -->
36
+ <form action="" method="POST" name="form">
11
37
  <table>
12
38
  <tbody>
13
39
  <tr>
@@ -15,47 +41,55 @@
15
41
  <td><input type="text" name="name" id="name" placeholder="山田太郎"></td>
16
42
  </tr>
17
43
  <tr>
18
- <th>
19
- <div class="err-msg-name"></div>
44
+ <th><p id="err-msg-name"></p></th>
20
- </th>
21
- <td><input type="submit" class="submit"></td>
45
+ <td><input type="submit" value="Submit"></td>
22
46
  </tr>
23
47
  </tbody>
24
- </table>
48
+ </table>
25
49
  </form>
26
50
  ```
27
51
  ```javascript
28
52
  window.addEventListener('DOMContentLoaded', () => {
29
53
 
30
54
  // 他でも再利用するかもしれないので、ひとまずここで要素を全て取得してみました
31
- const form = document.querySelector('#form'); // form要素を取得
32
- const submit = document.querySelector('.submit');
55
+ const form = document.form;
33
- const name = document.querySelector('#name');
56
+ const inputName = document.form.name;
34
- const errMsgName = document.querySelector('.err-msg-name');
57
+ const errMsgName = document.querySelector('#err-msg-name');
35
58
 
36
59
  // 繰り返し使用するclass名は変数にいれておくとよいです。
37
60
  // そうすると、class名に変更があっても、この一箇所を修正するだけで済みます。
38
61
  let classFormInvalid = 'form-invalid';
39
62
  let classInputInvalid = 'input-invalid';
40
63
 
41
- submit.addEventListener('click', (e) => {
64
+ let isValid = true; // Formの有効・無効状態を管理する変数
42
- e.preventDefault();
43
65
 
44
- // 未記入の場合
66
+ // Formが送信された時のイベント
67
+ form.addEventListener('submit', event => {
68
+ event.preventDefault();
69
+
70
+ validateForm(); // バリデーション実行
71
+ if (isValid) return; // Formが無効状態の場合、ここで処理を終了（以降の行は読み込まれない）
72
+
73
+ form.submit(); // Formが有効の場合のみ、デフォルトの送信処理を行う
74
+ });
75
+
76
+ /**
77
+ * 入力欄を検証する関数
78
+ */
79
+ function validateForm() {
45
- if (name.value.isEmpty()) { // 下部のメソッドを使用
80
+ if (inputName.value.isEmpty()) { // 入力欄が無記入の場合
46
- errMsgName.classList.add(classFormInvalid);
81
+ errMsgName.classList.add(classFormInvalid);
47
- errMsgName.textContent = 'お名前が入力されていません';
82
+ errMsgName.textContent = 'お名前を入力してください';
48
- name.classList.add(classInputInvalid);
83
+ inputName.classList.add(classInputInvalid);
84
+ isValid = true; // Formの状態を無効にする
49
- return;
85
+ return; // ここで処理を終了（以降の行は読み込まれない）
50
-
51
- // 入力されている場合
86
+ } else { // 入力されている場合
52
- } else {
53
- errMsgName.classList.remove(classFormInvalid); // エラーメッセージのinvalidクラス削除
87
+ errMsgName.classList.remove(classFormInvalid);
54
88
  errMsgName.textContent = '';
55
- name.classList.remove(classInputInvalid);
89
+ inputName.classList.remove(classInputInvalid);
56
- form.reset(); // formをリセットすることで、formタグ内の入力内容が全て消えます
90
+ isValid = false; // Formの状態を有効にする
57
91
  }
58
- }, false);
92
+ }
59
93
  }, false);
60
94
 
61
95
  /**
@@ -68,6 +102,5 @@
68
102
  // 上記のコードではこのメソッドを1度しか使っていませんが、
69
103
  // 今後再利用できそうなのでStringオブジェクトのメソッドとして作成しました。
70
104
  ```
71
- - 入力欄に文字が入力されている場合、送信したあとの処理として入力内容の削除処理を追加 - `form.reset()`
72
105
  - 空白（スペース）のみの入力でもOK判定されていたので、空白のみは不可判定となるようメソッドを追加
73
106
  - その他、軽微な変更を行いました

1

誤字修正

2022/09/24 17:01

投稿

Cocode
Cocode

スコア2314

test CHANGED
@@ -5,7 +5,7 @@
5
5
 
6
6
  ### コード例
7
7
  デモページを用意しましたので、よろしければ実際に触ってみてください。
8
- - [デモ on JSFiddle](https://jsfiddle.net/7ej2a0co/)
8
+ - [デモ on JSFiddle](https://jsfiddle.net/kn5vp74o/)
9
9
  ```html
10
10
  <form action="" method="POST" id="form"><!-- idつけました -->
11
11
  <table>
@@ -27,7 +27,7 @@
27
27
  ```javascript
28
28
  window.addEventListener('DOMContentLoaded', () => {
29
29
 
30
- // 他でも再利用するかもしれないので、ひとまずGlobalで要素を全て取得
30
+ // 他でも再利用するかもしれないので、ひとまずここで要素を全て取得してみました
31
31
  const form = document.querySelector('#form'); // form要素を取得
32
32
  const submit = document.querySelector('.submit');
33
33
  const name = document.querySelector('#name');
@@ -66,7 +66,7 @@
66
66
  return this.trim() === '';
67
67
  }
68
68
  // 上記のコードではこのメソッドを1度しか使っていませんが、
69
- // 今後流用できそうなのでStringオブジェクトのメソッドとして作成しました。
69
+ // 今後再利用できそうなのでStringオブジェクトのメソッドとして作成しました。
70
70
  ```
71
71
  - 入力欄に文字が入力されている場合、送信したあとの処理として入力内容の削除処理を追加 - `form.reset()`
72
72
  - 空白（スペース）のみの入力でもOK判定されていたので、空白のみは不可判定となるようメソッドを追加