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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

1472閲覧

Jqueryでエラーメッセージが何度も表示される

ooo9999

総合スコア6

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2019/08/14 07:29

編集2019/08/14 07:30

前提・実現したいこと

送信ボタンを押すたびにエラーメッセージが表示されるのを防ぎたい

やってみたこと

Jqueryでバリデーションを行い、未入力欄があった時に
エラーメッセージは表示されます。
ただ、送信ボタンを押すたびにエラーメッセージがでて増えていきます...
初めにエラーメッセージの初期化をすればいいとサイトに書いてあったので

error_message.remove();

としてみましたがやはり何も変わらず....
どなたかアドバイスお願いいたします。

HTML

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <!-- js --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="./js/post_customer.js" charset="utf-8"></script> </head> <body> <header></header> <main id="main" class="post_area"> <form class="post_form" action="confirm.php" method="post"> <!-- 名前 --> <div class="item"> <label class="label_block" for="name"> <i class="fas fa-hand-point-right icon"></i> お名前<span class="required">必須</span> </label> <input id="name" class="inputs vali_name" type="text" name="name" autocomplete="off" /> </div> <!-- 年齢 --> <div class="item"> <label class="label_block" for="age"> <i class="fas fa-hand-point-right icon"></i> 年齢<span class="required">必須</span> </label> <input id="age" class="inputs vali_age num-only" type="text" name="age" autocomplete="off" /> </div> <!-- 都道府県 --> <div class="item"> <label class="label_block" for="prefectures"> <i class="fas fa-hand-point-right icon"></i> 都道府県<span class="required">必須</span> </label> <input id="prefectures" class="inputs vali_live" type="text" name="prefectures" autocomplete="off" />     </div> <!-- 送信、リセットボタン --> <div class="btn_area"> <input id="form_btn" type="submit" value="送信する" /> <input type="reset" value="リセット" /> </div> </form> </main> <footer></footer> </body> </html>

Jquery

$(function() { $("#form_btn").click(function(){ var error_message = '<span class="error">必須項目です</span>'; var error_num = '<span class="error">半角数字のみです</span>'; //↓このように書いても反映されません、むしろバグ?ります... error_message.remove(); error_num.remove(); // 名前 if($(".vali_name").val()==""){ $('.vali_name').after(error_message); } // 年齢 if($(".vali_age").val()==""){ $('.vali_age').after(error_message); }else if(!$(".vali_age").val().match(/^\d+$/)){ $('.vali_age').after(error_num); } // 都道府県 if($(".vali_live").val()==""){ $('.vali_live').after(error_message); } // 評価の理由 if($(".vali_comment").val()==""){ $('.vali_comment').after(error_message); } return false; }); });

宜しくお願い致します....

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

問題は after() で、

$('.vali_name').after(error_message);

この場合、$('.vali_name')の後ろにerror_message を追加しているだけ。
すでに存在しているかいないかを判定していないので、何個でも追加されてしまっているのです。


JavaScriptを書きやすくHTMLを作るのも大切です。

html

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 <meta http-equiv="X-UA-Compatible" content="ie=edge"/> 7 8 <!-- js --> 9 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 10 <script src="./js/post_customer.js" charset="utf-8"></script> 11 <style> 12 .hide { 13 display: none; 14 } 15 </style> 16</head> 17<body> 18<header></header> 19 20<main id="main" class="post_area"> 21 <form class="post_form" action="confirm.php" method="post"> 22 <!-- 名前 --> 23 <div class="item"> 24 <label class="label_block" for="name"> 25 <i class="fas fa-hand-point-right icon"></i> 26 お名前<span class="required">必須</span> 27 </label> 28 <input id="name" 29 class="inputs vali_name" 30 type="text" 31 name="name" 32 autocomplete="off"/> 33 <span class="error-message hide">error</span> 34 </div> 35 36 <!-- 送信、リセットボタン --> 37 <div class="btn_area"> 38 <input id="form_btn" type="submit" value="送信する"/> 39 <input type="reset" value="リセット"/> 40 </div> 41 </form> 42</main> 43 44<footer></footer> 45</body> 46</html>

javascript

1$(function () { 2 3 4 function setErrorMessage(selector, string) { 5 $(selector).next('.error-message').text(string).removeClass('hide'); 6 } 7 8 $("form.post_form").on('submit', function (e) { 9 10 let error = 0; 11 12 let error_message = '必須項目です'; 13 let error_num = '半角数字のみです'; 14 15 // 名前 16 if ($(".vali_name").val() == "") { 17 error++; 18 setErrorMessage('.vali_name', error_message); 19 } 20 21 if (error) { 22 return false; 23 } 24 }); 25 26});

投稿2019/08/14 07:44

編集2019/08/14 08:12
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ooo9999

2019/08/14 07:48

回答ありがとうございます! その場合はどのような構文がふさわしいでしょうか...((+_+))
ooo9999

2019/08/15 02:53

うわぁ。。。。わざわざ本当にありがとうございます!!! がんばってみます!!
guest

0

上記の error_messageerror_num は文字列です。
その文字列に対して remove() しているのが問題かと思います。
正しい使い方としては $(".error").remove() という感じですね。

投稿2019/08/14 07:44

ryo-is

総合スコア152

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ooo9999

2019/08/14 07:50

うわぁ!解決できました!! ありがとうございます!!!!
ooo9999

2019/08/14 07:53

ちなみに、今すべて一つずつif文で指定していっているのですが、 else ifでしたり、同じクラスを使って一気に指定するというのは可能でしょうか...?
ryo-is

2019/08/14 08:05

できないことはないと思いますけど、個人的には今の書き方で十分かなーって思います。 頑張って共通化したけど、すごく読みにくくなってしまった…みたいな未来が見えます。
ooo9999

2019/08/15 02:52

そうなんですね....!! 本当にありがとうございます!!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問