空白で入力フォームのボタンをクリックしたら、ブラウザの上部からjavascriptで 表示されるアラ

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

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

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

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

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

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

No.1 ベストアンサー 回答者： fujillin 回答日時： 2022/05/20 13:59

こんにちは

多分、前半のスクリプトは私が以前回答したものではないかと思います。
（前半と後半であまりにも記法が異なるので、相当にアンバランスですが・・）

まず、INPUT要素とSELECT要素は別物なので、扱いそのものが違います。
＞セレクトボックス付近の赤いテキストメッセージだけ表示されません。
想定しているHTML構造を無視して、好き勝手なところに置いたからといって、忖度してくれるようなスクリプトにはなっていませんので、動作するようにしたければ、HTMLを修正するかスクリプトを修正する必要があります。

※ 使用しているスクリプトが、何を行っているかぐらいは理解した上で使いましょう。
　あるいは、わからない場合にはスクリプトの想定範囲内で使うのが当然かと。


対処法は上記の通りですが、HTMLから全面的に書き直すのは面倒なので、スクリプトで無理矢理対応。
（ですので、あまり良い形態とは言えませんが）
cinst の部分を以下に置き換えることで、現状のソースなら、対応できるものと思います。

const
form = document.getElementById('form'),
inputs = [...form.querySelectorAll('input[type="text"]'), ...form.querySelectorAll('select')],
Checker = (elm)=>{
const cls = (elm.nextElementSibling || elm.parentNode.nextElementSibling).classList;
const flag = elm.value.trim() == "";
if(flag) cls.add('show'); else cls.remove('show');
return flag;
};

この回答へのお礼

ありがとうございます。すみません。勉強不足でした。感謝致します。

お礼日時：2022/05/20 18:48