前提・実現したいこと
送信ボタンを押すたびにエラーメッセージが表示されるのを防ぎたい
やってみたこと
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; }); });
宜しくお願い致します....
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/14 07:48
2019/08/15 02:53