空白で入力フォームのボタンをクリックしたら、ブラウザの上部からjavascriptで
表示されるアラートと同時に入力フォーム付近に、さらにテキストによるエラーメッセージを同時に表示させたいのですが、上手くいきません。
ブラウザの上部のアラート表示はきちんとなっています。
フォームの付近のテキストは名前とフリガナのみ赤字テキストが表示されますが「付属画像のような感じです。」、これをさらに、
フォームの付近に出る赤字のテキストによるエラーメッセージをさらにセレクトボックスの下にも表示されるようにしたいです。
自分なりに書き直してみたのですが、セレクトボックス付近の赤いテキストメッセージだけ表示されません。
コードは下のURL共有サイトにあります。
コードのstayleタグの下と、一番下のjavascriptコードに赤いテキストエラーを表示させるコードが記載されています。
/* ボタンクリック後テキストアラートの表示 */
この2か所を書き直してみましたが、再現されないので、最初の状態のコードを提示しています。
https://harigami.net/cd?hsh=56515cef-4270-409d-b …
No.1ベストアンサー
- 回答日時:
こんにちは
多分、前半のスクリプトは私が以前回答したものではないかと思います。
(前半と後半であまりにも記法が異なるので、相当にアンバランスですが・・)
まず、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;
};
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript ソースコードは下の共有コードサイト「張り紙」にあります。 入力フォームの javascript で 1 2022/05/11 11:01
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript 読み込んだQRコードをフォームに受け渡したい 1 2023/05/18 11:18
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- その他(データベース) Accessフォームからパラメーターで表示したレコードを指定のExcelのセルへ転送する方法について 2 2022/08/22 18:04
- Visual Basic(VBA) ユーザーフォーム「frm_基本❶」を立ち上げると新規で入力する行数を右下のNoとして表示しています。 1 2023/03/16 19:02
- JavaScript javascriptで入力フォームが空欄の時にアラートによるエラーを出すコードを書いています。 2 2023/06/13 17:58
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
別のアプリケーションのテキス...
-
VB6.0 でメニューを作りたいん...
-
テキストボックスの中身をリセ...
-
AS3.0 ダイナミックテキストの...
-
DelphiのRichEditでカーソル位...
-
Access2000 実行時エラー '3061':
-
RPG(AS400)の本、サイトってあ...
-
Googleのサイト内検索設置で、...
-
VBAで改行の入ったデータの正規...
-
YOASOBI
-
プログラミング、アーキテクチ...
-
photoshopで書いた四角の枠の中...
-
DataTableの件数を取得したい
-
ipconfig /releaseって何ですか?
-
python ボタンを押すと複数の関...
-
PYTHONのtkinterについて
-
VBScriptでMsgBoxのYesNoボック...
-
UWSCのBTN関数について。
-
VBAユーザーホームテキストボッ...
-
Pythonのtkinterについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
RPG(AS400)の本、サイトってあ...
-
別のアプリケーションのテキス...
-
テキストボックスの中身をリセ...
-
ホームぺージ制作で間違って重...
-
テキストボックスにセルの値を...
-
コモンダイアログのshowopenに...
-
全てのテキストボックスをセル...
-
漢字入力した値のカタカナ変換...
-
変数に256文字以上のテキストを...
-
VB6.0 でメニューを作りたいん...
-
VB.NET2005 DataGridViewでレコ...
-
DelphiのRichEditでカーソル位...
-
VBSでMid関数を使ったらエラー...
-
MFCのスタティックテキストのコ...
-
改行含むテキストの表示の仕方
-
テキストエリア内の文字列にリ...
-
チェックボックスのテキストを...
-
VB.NETで数十行のプログラムを...
-
HTMLのtextbox類に文字を残す
-
VBのチェックボックス
おすすめ情報