form内の処理にて、console.logの中身が表示されません

formの値を取得し、バリデーションのチェックの処理を書いてみたのですが、うまくいかない部分があります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>お問合せ画面</h1>
  <h2>お問合せ内容を入力してください</h2>
  <form method="post" action="#" name="input_form">
    <p>(必須)名前<input type="text"  name="name"></p>
    <p>(必須)年齢<input type="text" size="5" name="age">歳</p>
    <p>好きな色
      <input type="checkbox" name="color" value="red">赤
      <input type="checkbox" name="color" value="green">緑
      <input type="checkbox" name="color" value="blue">青
    </p>
    <input type="submit" id="btn" value="送信">

  </form>
  <script>
    

    document.addEventListener('DOMContentLoaded',function(){
      document.getElementById('btn').addEventListener('submit',e => {
        // if(user_name)
      e.preventDefault();
      const form = document.forms.input_form;
      let user_name = form.name.value;
        console.log(user_name);
      if(user_name == ''){
        console.log('名前が入力されていません');
      }


      });
    });

  
  </script>
</body>
</html>

上記コードにおいて、名前のテキストエリア内には何も入力せず、送信ボタンを押したにも関わらず、「console.log('名前が入力されていません');」ここの部分がコンソールにて、表示されません。
何故console.logの中身が表示されないのでしょうか？

jun68ykt

2019/08/24 11:12

「名前が入力されていません」が表示されるのは、名前のテキストエリア内に何も入力されていない場合に、送信ボタンが押されたときと思われますので、ご質問にある、「名前のテキストエリア内に文字を入力し、送信ボタンを押したにも関わらず、「console.log('名前が入力されていません');」ここの部分がコンソールにて、表示されません。」というのは意図通りなのではないでしょうか？

退会済みユーザー

2019/08/24 11:59

ご指摘ありがとうございます。すみません。質問文に誤りがありました。実際は、「名前のテキストエリア内の文字を入力せず、送信ボタンを押した場合」についてでした。質問の方、修正させて頂きました。

jun68ykt

2019/08/24 12:23

修正ありがとうございます。ついては、問題の原因と修正案を回答しましたので、ご確認ください。

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

回答3件

ベストアンサー

こんにちは

submit イベントの説明に、以下のように書かれています。

Note that the submit event fires on the <form> element itself, and not on any <button> or <input type="submit"> inside it. (Forms are submitted, not buttons.)

ですので、 submit イベントのリスナーを設定する対象はフォームになります。例えば以下のように修正すればよいかと思います。

javascript
1  document.addEventListener('DOMContentLoaded',function(){
2
3    document.forms.input_form.addEventListener('submit', function(e) {
4      let valid = true; // 1つでもバリデーションエラーの項目があれば false にするフラグ
5      let user_name = this.name.value;
6      console.log(user_name);
7      if(user_name == ''){
8        console.log('名前が入力されていません');
9        valid = false;
10      }
11
12      // ･･･他の項目のバリデーション
13
14      // すべてのバリデーションが終わった後、valid フラグがfalse なら、フォームをサブミットしないようにする。
15      if(!valid)
16        e.preventDefault();
17    });
18
19  });

追記

上記のように修正するか、もしくは送信ボタンにイベントハンドラを設定するのであれば、送信ボタンを以下

html
1<input type="button" id="btn" value="送信">

のように type="submit" ではなく、 type="button" にして、普通のボタンにしておいて、ボタンのクリックハンドラを、たとえば、以下のような内容で設定します。

javascript
1  document.addEventListener('DOMContentLoaded',function(){
2
3    document.getElementById('btn').addEventListener('click', (e) => {
4      const form = document.forms.input_form;
5      let valid = true; // 1つでもバリデーションエラーの項目があれば false にするフラグ
6
7      let user_name = form.name.value;
8      console.log(user_name);
9      if(user_name == ''){
10        console.log('名前が入力されていません');
11        valid = false;
12      }
13
14      // ･･･他の項目のバリデーション
15
16      // 他のバリデーションも全部通ったら、フォームをサブミットする。
17      if (valid)
18        form.submit();
19    });
20
21  });

追記2

フォームに submit イベントのハンドラを設定するほうのコードで、

document.forms.input_form.addEventListener('submit', function(e) {

let user_name = this.name.value;

と、アロー (e) => { ・・・ } ではなく function(e) {・・・} と書くことにより、 this にフォームが入ってきます。アローを使って、thisを使わないとするならば、たとえば以下でもよいです。

javascript
1const form = document.forms.input_form;
2
3form.addEventListener('submit', () => {
4    let user_name = form.name.value;

投稿2019/08/24 12:22

編集2019/08/24 13:44

jun68ykt

総合スコア9058

退会済みユーザー

2019/08/24 13:11

ご回答ありがとうございます。バリデーション処理に関して、具体的な例まで提示頂き大変勉強になります。すみません。一点だけお聞きしたい部分があるのですが、「let user_name = this.name.value;」ここの「this」はイベント(今回だとsubmit)を適用している要素(form)を指しているといった理解で正しいのでしょうか...?

jun68ykt

2019/08/24 13:28

> ここの「this」はイベント(今回だとsubmit)を適用している要素(form)を指しているといった理解で正しいのでしょうか...? はい。正しいです。それを確認するには、例えば以下 https://codepen.io/jun68ykt/pen/JjPWPgL のように、 console.log(this.tagName); としてみると、tagName は、対象要素のタグ名を大文字で返すので、 FORM と console に表示されるのが確認できると思います。

退会済みユーザー

2019/08/25 00:32

ご丁寧に教えて頂き、ありがとうございます。アロー関数と、通常の関数の使い分けなど、勉強になりました。ご提示いただきました方法を参考に、色々試して動かし、最適な方法を探してみたいと思います。

jun68ykt

2019/08/25 01:20

どういたしまして。お役立ていただけましたら幸いです。

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

以下のように記述すれば動作します。

(DOMContentLoadedはこのコードでは不要なので削除)

js
1document.forms.input_form.addEventListener('submit', function(e) {
2  e.preventDefault();
3  const user_name = this.name.value.trim();
4  console.log(user_name);
5  if (user_name === '') {
6    console.log('名前が入力されていません');
7  }
8});