ooo9999 score 6
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; |
| }); |
| }); |
| ``` |
| 宜しくお願い致します.... |
