エラーメッセージが一瞬で消えてしまう

以下は、過去の質問の回答を参考にし、作成したバリデーションのコードになります。
しかし、一点うまくいかない点があります。
名前、年齢を入力し、チェックボックスのみチェックをいれず送信ボタンを押した場合、エラーメッセージがチェックボックス上に表示されますが、一瞬のみの表示ですぐに消えてしまいます。
何故、このような現象が起きてしまうのでしょうか...?

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>validation</title>
  <style>
    .err_msg{
      margin-top:0;
      color:red;
    }
  
  </style>

</head>
<body>
  <h1>お問合せ画面</h1>
  <h2>お問合せ内容を入力してください</h2>
  <form method="post" action="" name="input_form">
    <span class="err_msg" id="name_err"></span>
    <p>(必須)名前<input type="text" name="name" id="input_name"></p>
    <span class="err_msg" id="age_err"></span>
    <p>(必須)年齢<input type="number" name="age" id="input_age"></p>
    <span class="err_msg" id="color_err"></span>
    <p>
      好きな色
      <input type="checkbox" name="color[]" value="red">赤
      <input type="checkbox" name="color[]" value="green">緑
      <input type="checkbox" name="color[]" value="blue">青
      <input type="checkbox" name="color[]" value="yellow">黄色
      <input type="checkbox" name="color[]" value="other">その他
      <input type="checkbox" name="color[]" value="nothing">特になし
    </p>
    <input type="button" id="submit_btn" value="送信">

  
  </form>
  <script>
    document.addEventListener('DOMContentLoaded',function(){
      document.getElementById('submit_btn').addEventListener('click',function(e){
        let valid = true;

        let err_msg = document.getElementsByClassName('err_msg');
        // console.log(err_msg);
        for(let er=0; er < err_msg.length; er++){
          err_msg[er].textContent = '';
        }
        let name_value = document.getElementById('input_name').value;
        
        
        if(name_value.trim() == ''){
          valid = false;

          let name_err = document.getElementById('name_err');
          name_err.textContent = '名前が入力されていません';
        }

        let age_value = document.getElementById('input_age').value;

        if (age_value.match(/[^0-9]/g)
              ||
            parseInt(age_value, 10) + "" != age_value
        ) {
            valid = false;
            document.getElementById('age_err').textContent = '年齢は数字のみ入力してください';
        }

        // let color_list = document.getElementsByName('color');
        let color_list = document.querySelectorAll("input[type='checkbox'][name='color[]']");

        let check_flag = false;
        for(let cl=0; cl < color_list.length; cl++){
          if(color_list[cl].checked){

            check_flag = true;
            break;
          }
        }

        if(!check_flag){

           document.getElementById('color_err').textContent = 'チェックされていません';
          
        }

        if(valid){
          document.input_form.submit();
        }

      });
    });
    
    
  </script>
</body>
</html>

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

回答1件

ベストアンサー

当該条件時にvalid = false;を忘れている

投稿2019/08/29 13:08

m.ts10806

総合スコア80850

m.ts10806

2019/08/29 13:53

あと当該回答含めて以前の回答が全く活きてないので見なおしてください。スポットだけやってても根本理解にはつながりません。デバッグ覚えないとね。submitを止めるところから。

退会済みユーザー

2019/08/30 07:07

今回質問した部分以外ですと、どの部分を修正すれば良いですか？

m.ts10806

2019/08/30 07:17

修正のことはありません。以前のアドバイスが全く活きてないという指摘です。「エラーメッセージが一瞬で消えてしまう」という種類の質問何回目でしょうか。別の質問の回答でも「今後同じような間違いをおこさないようにするため」のアドバイスが沢山盛り込まれていたはずです。今起きている問題だけ解決したところで何の学習にもなりません。デバッグは分かりますか？初心者がHelloWorldの次に覚えるべき技術です。デバッグをしていれば何度も「エラーメッセージが一瞬で消えてしまう」という質問をしなくて済むはずです。 ss_111さんは「実は、mtsさんのコードを参考に、できるだけmtsさんのコードを見ずに、自分で一から作ってみた」と仰いましたよね。でしたらコードのことは一番知っていてしかるべきだと思います。読んだときに99％くらい私のコードでした（だから一瞬で分かった）このコードをきちんと説明できますか？どこまで理解できて書いているのかを問うています。（でないと私のコードも時間も全部無駄になります）

退会済みユーザー

2019/08/30 07:24

javascriptに関してのデバッグはconsole.logを使う方法は知っていますが、それ以外だとあまり知らないです。＞このコードをきちんと説明できますか？どこまで理解できて書いているのかを問うていますはい。確かに、つまずいた箇所はmtsさんのコードを見たりして確認はしましたが、理解はできています。

m.ts10806

2019/08/30 07:28

＞javascriptに関してのデバッグはconsole.logを使う方法は知っていますが、それ以外だとあまり知らないです。今回はsubmit()の行をコメントアウトしてconsole.log()を使えば十分それでデバッグができます。ステップ実行も覚えたほうが良いとは思います。 https://ics.media/entry/190517/ もしかしたら同じようなことを以前も言ったかもしれませんが、 submit()はあくまで全てがOKだった場合に送信されるもので、処理的にはバリデーションもちゃんと実装できた前提でようやくsubmit()させられるので、それが全て完璧になるまでは送信させてはいけません。それに「エラーメッセージが一瞬で消えてしまう」という質問をしている時点で https://teratail.com/questions/208564 ↑上記の質問を理解できていないとみている人はみんな感じていると思います。

m.ts10806

2019/08/30 07:30 編集

コードもいきなり書くのではなく処理フローのようなものを簡単に手書きでも良いので書いてから臨むべきと思います。簡易的な詳細設計ですね。私も前回あのコードを提示する際はざっとロジックを考えて手書きで書いてからコードに起こしています。コードを書くのは最後でいいです。しっかりとロジックを確立できてから考えてから手を動かし、行き詰ったときは手書きで書いたロジック通りにできてるかとか、そもそもロジックが間違っていないかとか推敲して軌道修正します。

退会済みユーザー

2019/08/30 07:35

確かに、submitさせる部分でconsole.logすれば良いですよね。。手書きというのは、コードを書く前に、紙などにロジックを書いたということでしょうか？

m.ts10806

2019/08/30 07:42

> submitさせる部分でconsole.logすれば良いですよね。。 submitを止めて（コメントアウト）おかないとconsole.log()しても送信されるのでほとんどまともに確認はできませんのでご注意を。的確なデバッグの仕方はもちろん1行1行・分岐を確認していくのもありますが、「最小構成のプログラムでそこだけ確認する」のもデバッグ技術です。問題の切り分けをしていって原因究明することなので。 >手書きというのは、コードを書く前に、紙などにロジックを書いたということでしょうか？今回は紙というより、おおよそ決まりきったロジックではあるので、簡単に頭の中で描いて、それをコードにしていった形ですね。画面遷移を伴ったりもっとたくさんのデータを扱うのでしたら最低でも画面設計から作ります。部品部品が全てちゃんとできてようやく全体的な組み上げができるようになります。これは家を建てるときとか、もっと言えば工作と同じ。まず設計図を書きます。そして作っていく手順を決めます。役割分担を決めます。そこで初めて「製造」です。どんな小さいコードでも「ロジック」はあるので、それをコードを組みながら考えるのはどんな熟練者でも至難の業です。コードを組む時にはほとんど仕事は終わっていてあとは考えた通りに組むだけというのが通常です（これは業務関係なく、最も着実に進めるために必須です）

退会済みユーザー

2019/08/30 07:55 編集

確かに、ロジックを組み立ててからでないと、うまくいかないですよね。。ある程度はロジックを組み立ててから、処理を書いていくようにしたいと思います。

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