下記コードにおきまして、年齢の入力ボックスに数字を入力しているにも関わらず、エラーメッセージ「年齢は数字のみ入力してください」が表示されてしまいます。
バリデーションチェックに問題があるということなのでしょうか？こちらの現象を解決したい為、アドバイス頂けましたら幸いです。

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

  </style>
</head>
<body>
  <h1>お問合せ画面</h1>
  <h2>お問合せ内容を入力してください</h2>
  <form method="post" action="" name="input_form" class="form" onsubmit="return false">

    <p id="name_box">(必須)名前<input type="text"  name="name"></p>
    <p id="age_box">(必須)年齢<input type="text" size="2" name="age">歳</p>
    <p id="color_list">好きな色
      <label><input type="checkbox" name="color" value="red">赤</label>
      <label><input type="checkbox" name="color" value="green">緑</label>
      <label><input type="checkbox" name="color" value="blue">青</label>
      <label><input type="checkbox" name="color" value="other">それ以外</label>
      <label><input type="checkbox" name="color" value="nothing">特になし</label>
    </p>
    <input type="submit" id="btn" value="送信">
  </form>
  <script>
    

    document.addEventListener('DOMContentLoaded',function(){
      document.forms.input_form.addEventListener('submit',function(e){
        // if(user_name)
        
      let valid = false;
      let form = document.getElementsByClassName('form');
      let name_box = document.getElementById('name_box');
      let name_err_msg = document.createElement('p');
      let age_err_msg = document.createElement('p');
      let err_msg = document.getElementsByClassName('err_msg');
      let age_box = document.getElementById('age_box');
      let color_list = document.getElementById('color_list');
      let is_err_msg = document.getElementsByClassName('name_check_err');
      let node_err_msg = is_err_msg.item(0);
      let age_err_box = document.getElementsByClassName('age_err_box');
      let node_age_err = age_err_box.item(0);
      console.log(is_err_msg);

      name_err_msg.classList.add('err_msg');
      let str_num = '';

      let user_name = this.name.value;
      let user_age = this.age.value;
        console.log(user_name);

      if(user_name == ''){

        valid = false;

        if (is_err_msg.length === 0) {
          name_err_msg.classList.add(('err_box','name_check_err'));
          name_err_msg.textContent  =  '名前が入力されていません';
          name_box.parentNode.insertBefore(name_err_msg, name_box.parentNode.firstChild);
          
        }

      }else if(node_err_msg){
        node_err_msg.parentNode.removeChild(node_err_msg);

      }
      
      if (str_num.match(/[^0-9]/g)
         // "", " ", " 1", "1a" をはじく。
         // 単体では，"01" を通してしまう
        ||
        
        parseInt(str_num, 10) + "" != str_num
         // "01", "1 " など0付き・スペース付き文字列をはじく。
         // 単体では，スペースのみの文字列は通してしまう
      )
      {

        valid = false;
        

        if(age_box.classList.contains('err_box') == false){
            console.log('ng');
          age_box.classList.add(('err_box','age_err_box'));
          name_box.insertAdjacentHTML('afterend','<p class="err_msg">年齢は数字のみ入力してください</p>');

        }
        
        

        
      
      }else{
        if(node_age_err){
          node_age_err.parentNode.removeChild(node_age_err);
        }

      }

      let checked_flag = false;

      for(let i = 0; i < document.input_form.color.length; i++){
        if(document.input_form.color[i].checked){
          checked_flag = true;
        }
      }

      if(!checked_flag){
        valid = false;

        if(color_list.classList.contains('err_box') == false){
          color_list.classList.add(('err_box'));
          age_box.insertAdjacentHTML('afterend','<p class="err_msg">チェックされていません</p>');

        }
      }

      if(!valid){
        e.preventDefault();
      }
        
      });
    });

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

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

回答2件

ベストアンサー

前の質問の回答の後半に書いてます。

引用：

メッセージずっと出っ放し＋追記され続けるという現象はありますし、
user_ageを何も使ってないとか

年齢をチェックしているであろう箇所は下記

js
1      if (str_num.match(/[^0-9]/g)
2         // "", " ", " 1", "1a" をはじく。
3         // 単体では，"01" を通してしまう
4        ||
5
6        parseInt(str_num, 10) + "" != str_num

str_numの定義場所は下記

js
1let str_num = '';

コメントの通り、''弾きますね。

「なぜlet user_age = this.age.value;を利用しない？」
という指摘を既にしていたのですが、スルーされてたのでずっと残るわけです。

で、NGとなりますし、初回はage_boxにerr_boxなんてクラスはないので必ずif(age_box.classList.contains('err_box') == false){は成立します。

他についても同様のことが言えるのでは。

そこだけ直してももう1つ書いた「メッセージずっと出っ放し＋追記され続けるという現象」は起きてるので、これについては3回目の指摘なので現象は認識されているものとこれを見ている人は思っているのでちゃんと調べて自己解決してください。

insertAdjacentHTML()の仕様を重々確認しておくと良いのでは。私ならバリデーション処理の前に全エラーを削除しますけどね。
「エラーあったら残し続けておく」というのは非常にナンセンスな作りです。無駄な分岐が増えるだけの話。

それに前の質問の別の回答にあるように要素や入力内容の参照や取得の仕方もきちんと見直したほうが良いでしょう。
それで動くモノが作れたとしても評価されるものではなく、ほぼ使えないものです（古いので、業務では使わない）

作り直したコード

自分で調べてほしいのであえてコメントは付けていません。
ただし、不明点はこの場で全部解決すること
これを以て質問しても結局「そのコード、前の質問でもらったもんでしょ？その回答者に聞けば？」とほぼ間違いなく言われます。

HTMLもそれなりに調整していますのでJavaScriptだけ持っていかないようご注意を。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<title>Document</title>
7<style>
8.err_msg {
9	color: red;
10	margin-bottom: 0;
11}
12
13.input_box {
14	margin-top: 0;
15}
16
17</style>
18</head>
19<body>
20	<h1>お問合せ画面</h1>
21	<h2>お問合せ内容を入力してください</h2>
22	<form method="post" action="" name="input_form" class="form">
23		<span class="err_msg" id="name_err"></span>
24		<p id="name_box" class="input_box">
25			(必須)名前<input type="text" name="name" id="input_name">
26		</p>
27		<span class="err_msg" id="age_err"></span>
28		<p id="age_box" class="input_box">
29			(必須)年齢<input type="number" size="2" name="age" id="input_age">歳
30		</p>
31		<span class="err_msg" id="color_err"></span>
32		<p id="color_list" class="input_box">
33			好きな色 
34			<label><input type="checkbox" name="color[]" value="red">赤</label>
35			<label><input type="checkbox" name="color[]" value="green">緑</label>
36			<label><input type="checkbox" name="color[]" value="blue">青</label>
37			<label><input type="checkbox" name="color[]" value="other">それ以外</label>
38			<label><input type="checkbox" name="color[]" value="nothing">特になし</label>
39		</p>
40		<input type="button" id="submit_btn" value="送信">
41	</form>
42	<script>
43    document.addEventListener('DOMContentLoaded', function() {
44    	document.getElementById('submit_btn').addEventListener('click', function(e) {
45    		let valid = true;
46    		
47    		let error_msg_class = document.getElementsByClassName('err_msg');
48    		for(er=0;er<error_msg_class.length;er++){
49    			error_msg_class[er].textContent = "";
50    		}
51    		
52    		let name_value = document.getElementById('input_name').value;
53    		
54    		if (name_value.trim() == '') {
55    			valid = false;
56    			document.getElementById('name_err').textContent = '名前が入力されていません';
57    		}
58
59			let age_value = document.getElementById('input_age').value;
60    		if (age_value.match(/[^0-9]/g)
61    			||
62    			parseInt(age_value, 10) + "" != age_value
63    		) {
64    			valid = false;
65    			document.getElementById('age_err').textContent = '年齢は数字のみ入力してください';
66    		}
67    		
68    		let color_list = document.querySelectorAll("input[type='checkbox'][name='color[]']");
69
70    		let checked_flag = false;
71    		for(cl=0;cl<color_list.length;cl++){
72    			if (color_list[cl].checked) {
73    				checked_flag = true;
74    				break;
75    			}
76    		}
77    		if(!checked_flag){
78    			valid = false;
79    			document.getElementById('color_err').textContent = 'チェックされていません';
80    		}
81
82    		if (valid) {
83    			document.input_form.submit();
84    		}
85
86    	});
87    });
88  </script>
89</body>
90</html>

参考まで。

投稿2019/08/29 00:07

編集2019/08/29 01:24

m.ts10806

総合スコア80850

退会済みユーザー

2019/08/29 00:22

ご回答どうも。＞で、NGとなりますし、初回はage_boxにerr_boxなんてクラスはないので必ずif(age_box.classList.contains('err_box') == false){は成立します。ここの点に関しては、一度目送信時、エラーがあった場合のみ、エラーの表示を適用させる為の処理と考えていました。

退会済みユーザー

2019/08/29 00:23

エラーの削除処理に関しては、「 if(node_age_err){ node_age_err.parentNode.removeChild(node_age_err); } ここの部分に記載していますが、うまくいっていないといった状況です

m.ts10806

2019/08/29 00:26 編集

全体的にロジック見直したほうが早く確実に良いものが作れます。これで出来たとして使えるコードにはなりませんので。私であれば現在のコードはいったん全部捨てて考え直します。このまま枝葉をちょこちょこ直しててもグチャグチャになるだけです。

退会済みユーザー

2019/08/29 00:31

作り直すにしても自分は業務などは行っていないので、どこをどう直し、どのように組み立てるのが正解か、といった部分が分からない部分でもあります。

m.ts10806

2019/08/29 00:47 編集

正解はないです。ただ、業務を行ってないにしてもこの組み方でできたとして使えないと言っています。このまま続けたとして新たな不具合やバグでどんどんぐちゃぐちゃになると言っています。何を参考に作っているか知らないですが、その参考先は捨てたほうが良いでしょう。自己満足や趣味で作るにしてもひど過ぎます。＞低評価した人あと技術的な部分で回答に指摘できないなら低評価は取り消してください。

退会済みユーザー

2019/08/29 00:45 編集

＞あと技術的な部分で回答に指摘できないなら低評価は取り消してください。自分は低評価していないのですが... 僕に言われても困りますね...

m.ts10806

2019/08/29 00:49 編集

ああ、これは失礼。私がちょっと小言をいいはじめたタイミングと低評価のタイミングが同じだったので勘違いさせましたね。宛先つけておきました。あなたと同種（というか既に複数人が同じ人だと認識しています）のアカウントにした回答ほぼ全て低評価がつくので、そっちのアカウント関係かもしれませんけど。ひとまず、後程組みなおしたコードを提示しますので、勝手に持っていってください。（参考にして勉強してね、の意）

退会済みユーザー

2019/08/29 00:53 編集

>ひとまず、後程組みなおしたコードを提示しますので、勝手に持っていってくださいどうも。あなたの言い方はちょっとあれかもしれませんけど、問題解決につながってはいますし、低評価はしていないですね

m.ts10806

2019/08/29 00:55

んー。解決につながっていると思うのでしたら、補足部分や蛇足部分はきちんと読んでもらいたいですね。その時点でご自身が認識されていないだけできちんとコード読める人が見たら分かる今後必ずあたるであろうバグや不具合、問題部分を助言として提示しているのでその部分スルーして何も考慮されないまま質問しているのを見たら「さっき言ったじゃん」て誰でもなります。

退会済みユーザー

2019/08/29 01:09

補足や蛇足部分は読んでいましたけど、いまいちそこの部分だけでは伝わらなかったもので。

m.ts10806

2019/08/29 01:21 編集

不明点はその場で確認すればそこで解決できて次の質問は立てる必要はなくなります。分からない伝わってないからって何もコメントしないのはマズいですね。せっかくのアドバイスを無駄にしていることになるので。活かしてください。

m.ts10806

2019/08/29 01:27

作り直したコード提示しました。注意事項として書いていますが、このコードにおける不明点はここで全て解決してください。（というか今後、ついた回答で不明な点があればその場で解決する癖をつけてください）しっかりとロジック組み立てればelseが必要なシーンって実は少ないというところが分かってもらえたらと。

退会済みユーザー

2019/08/29 03:30

バリデーションのコードどうもです。最初からエラーメッセージを表示させる部分をspanタグで設定しておく点や、clickイベントが発生した際の先頭の処理で、中身を空にしておく点など勉強になりました。一点ご質問があるのですが、for文内の「er=0」や「cl=0」は変数の前に、「let」が付いていないのですが、「er」や「cl」はfor文内でしか使用しないですし、「let」を付けた方が良いのではないかとおもったのですが、その点はどうでしょうか？

m.ts10806

2019/08/29 03:46

button typeをsubmitでなくbuttonにしているところもポイントです。わざわざイベントを止めるくらいならそもそもsubmit起きないタグにしておいて、プログラムでsubmitしたほうがより無駄な処理がないという意図があってそうしています。 JavaScriptはほとんどがHTML操作で動作しますので、JavaScriptで操作しやすいHTML構成を考えるのもロジックの一端です。 > 一点ご質問があるのですが、for文内の「er=0」や「cl=0」は変数の前に、「let」が付いていないのですが、「er」や「cl」はfor文内でしか使用しないですし、「let」を付けた方が良いのではないかとおもったのですが、その点はどうでしょうか？簡易的な変数名を使っているのでスコープを区切らなくても実装上被ることはないだろうということで「つけなくても大丈夫」と思っていますが、より厳格にしたいというのでしたらつけても良いと思います。

退会済みユーザー

2019/08/29 04:07

アドバイスありがとうございます。バリデーションの処理を拡張する際も、提示頂いたコードを参考にさせて貰います。

m.ts10806

2019/08/29 04:10

ヒントになったようで何よりです。ポイントなので繰り返しますが、「今あるHTMLから何とかすることを考える」のではなく、「JavaScriptから操作しやすいHTMLを組む」ことが大事です。 HTMLはあくまで見た目なので、見た目が同じにできるならJavaScript（ひいてはCSS,PHPなども含めて）から操作しやすいHTMLにしておいたほうが楽ですよね？なるべく冗長な処理を避けたいのでしたら、全体から見てどうしたら楽に書けるかを考える癖をつけてください。

退会済みユーザー

2019/08/29 11:31

実は、mtsさんのコードを参考に、できるだけmtsさんのコードを見ずに、自分で一から作ってみたのですが、現在一点のみうまくいかない箇所があります。そこの部分を見て貰いたいのですが、見て貰うことは可能でしょうか？

m.ts10806

2019/08/29 11:33

解決済みになっているので別途質問たてられた方が良いです。その際はこの質問の回答を参考にしたことと、あと自身がどういう考えて作ったかをきちんと記載してください（もちろん、「うまくいかない」では何も伝わらないので具体的に現象を記載してくださいね）

退会済みユーザー

2019/08/29 11:37

分かりました。

m.ts10806

2019/08/29 11:40

ちなみになぜそうするかというとここでクローズディスカッションすると私の考え方で一部しか伝わらないので新規質問にすることで広くアドバイスをもらえ、広い見解・知見を得られる可能性があるからです。（オフトピではもったいないし、私が必ず回答するとも限りませんので）

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

color_list のクラスを操作しているのがそのif文の中だけだから、必ずfalseになる。

投稿2019/08/28 14:47

kei344

総合スコア69407

m.ts10806

2019/08/28 22:38 編集

前の質問でuser_age使ってないって指摘してたんですが、そこも関係ありますね。他のアドバイスも聞きたいことに直接関係ない内容は一切スルーされてるので時間だけ過ぎそう。（この質問出るって分かってた）

退会済みユーザー

2019/08/28 23:28

ご回答ありがとうございます。「そのif文の中だけ」とあるのですが、この「if文」はどこのif文のことを指しているのでしょうか？

think49

2019/08/28 23:40 編集

> 「そのif文の中だけ」とあるのですが、この「if文」はどこのif文のことを指しているのでしょうか？ "color_list" で検索したら、候補は一つだけでしたが、どうやって探していますか？

退会済みユーザー

2019/08/28 23:54 編集

>"color_list" で検索したら、候補は一つだけでしたが、どうやって探していますか？ color_listの記載のあるifとは限らないのではないかと思っていました。 color_listが含まれているif文ですと「if(color_list.classList.contains('err_box') == false){」ここの部分のことでしょうか？だとしても疑問な点があるのですが、「必ずfalseになる」とはどういう意味でしょうか？デフォルトではcolor_listにerr_boxクラスは設定されていないため、一度目の条件分岐ではerr_boxは「false」にはならないのではないでしょうか？

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

あなたの回答