japascriptでセレクトボックス付近にテキス

質問

空白で入力フォームのボタンをクリックしたら、ブラウザの上部からjavascriptで
表示されるアラートと同時に入力フォーム付近に、さらにテキストによるエラーメッセージを同時に表示させたいのですが、上手くいきません。

ブラウザの上部のアラート表示はきちんとなっています。
フォームの付近のテキストは名前とフリガナのみ赤字テキストが表示されますが「付属画像のような感じです。」、これをさらに、
フォームの付近に出る赤字のテキストによるエラーメッセージをさらにセレクトボックスの下にも表示されるようにしたいです。

自分なりに書き直してみたのですが、セレクトボックス付近の赤いテキストメッセージだけ表示されません。

コードは下のURL共有サイトにあります。

コードのstayleタグの下と、一番下のjavascriptコードに赤いテキストエラーを表示させるコードが記載されています。
/* ボタンクリック後テキストアラートの表示 */

この2か所を書き直してみましたが、再現されないので、最初の状態のコードを提示しています。
https://harigami.net/cd?hsh=56515cef-4270-409d-be40-cc5e0174ddb8

回答No.1

t_ohta · ベストアンサー

form.querySelectorAll('input[type="text"]')　としているから <input type="text"> のタグしか対象として動作していません。

後半のJavaScriptで個別の判定をしている訳ですから、
<div id="age.alert" class="alert">・年代をご選択下さい</div>
の様に個別にIDを振って
if (age.value == "") {
msg += "年代を選択して下さい。\n";
document.getElementById('age.alert').classList.add('show');
} else {
document.getElementById('age.alert').classList.remove('show');
}
と言った感じで個別にアラート表示を切り替えれば簡単じゃないですか。

回答No.2

dell_OK

回答No.1さまが言われるようにセレクトボックスが対象になっていません。
対象に追加するには、こんな感じで。
－－－－
inputs = [
...form.querySelectorAll('input[type="text"]'),
...form.querySelectorAll('select')],
－－－－
クラスにshowを追加している部分で使われているnextElementSiblingは同階層ノードの次の要素を返します。
inputはその次がメッセージ用のタグなのでうまく動作しています。
selectはspanで括られているのでメッセージ用のタグと階層が違っています。
spanが不要であればなくすか、メッセージ用のタグをspanの中に入れるかしてみてください。
－－－－
<span class="selectbox">
<select id="age" class="age" name="age">
<option value="">年代を選択する</option>
<option value="60代">>60代
</option>
</select>
<div class="alert">・年代をご選択下さい</div>
</span>
－－－－