質問編集履歴

1 実現したいこと

ooo9999

ooo9999 score 4

2019/08/14 16:30  投稿

Jqueryでエラーメッセージが何度も表示される
### 前提・実現したいこと
送信ボタンを押すたびにエラーメッセージが表示される
送信ボタンを押すたびにエラーメッセージが表示されるのを防ぎたい
### やってみたこと
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;
       });
});
```
宜しくお願い致します....
  • JavaScript

    22795 questions

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

  • HTML

    13057 questions

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

  • jQuery

    8991 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る