エラーメッセージの出力

javascriptのみを用いた、バリデーションの処理を作成しています。

js
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    }
11  </style>
12</head>
13<body>
14  <h1>お問合せ画面</h1>
15  <h2>お問合せ内容を入力してください</h2>
16  <form method="post" action="#" name="input_form" class="form">
17
18    <p id="name_box">(必須)名前<input type="text"  name="name"></p>
19    <p>(必須)年齢<input type="text" size="5" name="age">歳</p>
20    <p>好きな色
21      <input type="checkbox" name="color" value="red">赤
22      <input type="checkbox" name="color" value="green">緑
23      <input type="checkbox" name="color" value="blue">青
24    </p>
25    <input type="submit" id="btn" value="送信">
26  </form>
27  <script>
28    
29
30    document.addEventListener('DOMContentLoaded',function(){
31      document.forms.input_form.addEventListener('submit',function(e){
32        // if(user_name)
33        console.log('ok');
34      e.preventDefault();
35      let form = document.getElementsByClassName('form');
36      let name_box = document.getElementById('name_box');
37      let name_err_msg = document.createElement('p');
38
39      name_err_msg.classList.add('err_msg');
40
41      let age_err_msg = document.createElement('p');
42      
43
44      let err_msg = {};
45
46      let user_name = this.name.value;
47      let user_age = this.age.value;
48        console.log(user_name);
49      if(user_name == ''){
50        name_err_msg.textContent  =  '名前が入力されていません';
51        name_box.form.insertBefore(name_err_msg, name_box); 
52
53      }
54      
55      if (str_num.match(/[^0-9]/g)
56         // "", " ", " 1", "1a" をはじく。
57         // 単体では，"01" を通してしまう
58        ||
59        
60        parseInt(str_num, 10) + "" != str_num
61         // "01", "1 " など0付き・スペース付き文字列をはじく。
62         // 単体では，スペースのみの文字列は通してしまう
63      )
64      {
65        age_err_msg.textContet = '年齢は数字のみ入力してください';
66      }
67        
68      });
69    });
70
71  
72  </script>
73</body>
74</html>

上記コードにおいて、名前が入力されていない場合「name_box.form.insertBefore(name_err_msg, name_box); 」ここの部分によって、「<p id="name_box">(必須)名前<input type="text" name="name"></p>」ここの部分の上にPタグが生成され、エラーメッセージが表示されるよう、想定していました。
しかし、名前のテキスト欄に何も入力せず送信ボタンを押すと「Uncaught TypeError: form.insertBefore is not a function」というエラーがconsole画面に出力され、エラーメッセージを表示させることができません。
問題解決の為、ご助言頂けましたら幸いです。

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

回答2件

ベストアンサー

JavaScript
1let name_box = document.getElementById('name_box');
2(中略)
3name_box.form.insertBefore(name_err_msg, name_box);

getElementById で得たオブジェクトの型はElementで、このオブジェクトは form というメンバをもっていません。そのため現在のエラーが出ています。

また、 insertBefore() はNode型オブジェクトのメソッドなので、このメソッドを使用したい場合はNode型のオブジェクトに対して呼び出す必要があります。

やり方はいくつかありますが、ご提示いただいているコードを簡単に修正するなら下記のようなソースで動作すると思います。

diff
1      if(user_name == ''){
2        name_err_msg.textContent  =  '名前が入力されていません';
3-        name_box.form.insertBefore(name_err_msg, name_box); 
4+        name_box.parentNode.insertBefore(name_err_msg, name_box.parentNode.firstChild);
5
6      }

投稿2019/08/26 07:15

guissy-k

総合スコア245

退会済みユーザー

2019/08/26 09:58

ご回答ありがとうございます。「name_box.form」こちらの部分なのですが、「form」は変数「form」を渡しているつもりでした。といいますのも、「insertBefore」を調べていましたら、insertBeforeの前に「parentNode」とあったので、直接「let form = document.getElementsByClassName('form');」こちらで指定したものを、指定すれば良いのかとの勘違いをしてしまっていました...

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

理由：undefined

js
1
2      if(user_name == ''){
3        name_err_msg.textContent  =  '名前が入力されていません';
4        console.log(name_box.form); //undefined
5        name_box.form.insertBefore(name_err_msg, name_box); 
6
7      }

そもそもname_box(document.getElementById('name_box'))はpタグですし、HTML構造みてもその中にform要素なんて持っていません。

かといってform抜いてもname_box.insertBefore(name_err_msg, name_box); がエラーになります。

Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at HTMLFormElement.<anonymous>

[Node.insertBefore

](https://developer.mozilla.org/ja/docs/Web/API/Node/insertBefore)
指定のノードを現在のノードの子ノードとして参照要素の前に挿入します。
構文セクション
var insertedNode = parentNode.insertBefore(newNode, referenceNode);
referenceNode が null の場合、 newNode は子ノードのリストの末尾に挿入されます。
insertedNode 挿入されるノード、つまり newElement のこと
parentNode 新しく挿入されるノードの親ノード
newNode 挿入されるノード
referenceNode newNode が挿入される前にあるノード

insertBefore()の使い方を間違っているように思います。
第2引数は挿入したい要素の前にある要素なので、親と一緒にはできないと思います。

どこにどう導入したいのか一度整理しなおして適切な処理を利用されては如何でしょうか。
単にメッセージ入れたいだけならappendChild()でも良いでしょうし。

とりあえず出すだけならname_box.insertBefore(name_err_msg, null); で良い。出す場所がそこでいいかどうかで決めてください。
が、str_numという未定義変数のエラーは残るのであとは頑張ってください。

投稿2019/08/26 07:06

編集2019/08/26 07:45

m.ts10806

総合スコア80850

退会済みユーザー

2019/08/26 10:01

ご回答ありがとうございます。 >HTML構造みてもその中にform要素なんて持っていません。かといってform抜いてもname_box.insertBefore(name_err_msg, name_box); がエラーになります。こちらなのですが、何かの要素を内包している場合、ドットで繋げば、下の階層の要素を指定することができるのでしょうか？