質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

フォーム内が1つでも空白の場合にテキストによるエラーメッセージを表示させたいです。

ghtew2
habitmahrsnp

総合スコア203

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0リアクション

1クリップ

242閲覧

投稿2022/08/19 06:53

編集2022/08/20 01:40

フォーム内、入力フォームとセレクトボックスが1つずつあるのですが、2つの入力欄の内1つでも空白の状態で、「送信」ボタンを押した場合に、赤いテキストメッセージがフォーム付近に表示されるようにしたいです。

現状のコードでは、送信ボタンを押した際、セレクトボックスのみ空白の場合に赤いテキストメッセージが表示されるようになっています。

これを名前のフォームも空の場合(2つの入力欄の内どれか1つも空白の場合)に赤いメッセ―ジを表示させたいです。

回答よろしくお願いいたします。

html

<!DOCTYPE html> <html lang="ja"> <head> <meta content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style> </style> </head> <body> <form action="a.php" method="post" id="form"> <div class="auto-style2"> <input type="text" class="name" name="name" id="name" placeholder="例)幸運太郎" value=""/> <span class="selectbox1"> <select id="age" class="age" name="age"> <option value="">年代を選択する</option> <option value="OO歳" >>OO歳 </option> </select> </span> <div class="alert1">・必ず全て記入、選択して下さい!</div><!--赤いテキストエラーメッセージこの付近--> </div> <button type="submit" id="submit" name="submit" class="auto-style40" value="submit">送信 </button> </form> <script> { 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('show1'); else cls.remove('show1');// javaでテキスト赤エラーメッセージの表示alert1 return flag; }; form.addEventListener('change', e=>{ if(inputs.indexOf(e.target) >= 0) Checker(e.target); }); form.addEventListener('submit', e=>{ if(inputs.map(e => Checker(e)).indexOf(true) >= 0) e.preventDefault(); }); } </script> </body> </html>
/* セレクトボックスの位置 */ .auto-style2 { text-align: center; margin-top: 80px; background-color: white; } /* 出現文字show1 alert1 */ .alert1 { font-size: 0.85em; font-weight: bold; color: crimson; } .alert1 { visibility: hidden; } .alert1.show1 { visibility: visible; } .alert1.show1{ transform: translate(0px, 20px);/* 右側のpx上下調節 */ font-size: 20px; }

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

yambejp

2022/08/19 07:22 編集

「2つのフォーム」とはid="form"ともう一つはどれでしょう? selectとinputのことですかね・・・
m.ts10806

2022/08/19 07:31

一般的に「フォーム」はformタグそのものもしくはformタグで囲われた1グループのことを指すかと思います。 「テキスト入力」など「要素名」を提示されたほうが良いのでは(やりとりが増えるので憶測だけの回答は極力避けたいのが回答者心理です)
ghtew2

2022/08/19 10:05

返信遅くなり申し訳ありません。selectとinputのことでした。すみません。
m.ts10806

2022/08/19 13:12

質問は編集できますので、今からでも後から見た人に分かるように編集しておいてもらえたらと。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。