失礼いたします。
今、お問い合わせフォームで「送信時にバリデーションする」ということを
勉強しているのですが、どうしてもうまくいきません。
Jqueryでバリデージョンを行おうとしています。
実現したいことは、
「全項目-未入力がないか」と、
「年齢-数字以外が入力されていたらNG」
この二つです。
すべての項目を今必須にしていて、input要素の下に
エラーメッセージが出るようにしてます。
でもどこか一つでも項目が入力されていたらほかの項目は空でも
エラーメッセージが表示されません.......
また、年齢の部分の「数字以外が入力されてないとNG」の部分なのですが
そこもうまくいきません....
また実装方法もいくらやってもうまくいきません.....
いま、いくらやってもエラーメッセージすら出てこなかったので
submitをclickイベントに変えました。
そしたら未入力のエラーメッセージだけなんとか出てきたのですが、
数字の方は全く何も表示されず,,,,
あとやっぱりどれか一つでも項目が入力されていたら他の項目は空でも
エラーメッセージが表示されません.......
すみませんが、アドバイスをいただけると幸いです.....
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" /> <link rel="stylesheet" type="text/css" href="css/vali__pc.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="./js/vali_pc.js" charset="utf-8"></script> </head> <header> </header> <main> <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_required" type="text" name="name" autocomplete="off"> <span class="error"></span> </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_required num-only" type="text" name="age" autocomplete="off"> <span class="error"></span> </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_required" type="text" name="prefectures" autocomplete="off"> <span class="error num-only"></span> </div> </form> </main> <footer> </footer>jquryがこんな感じです......(コピペなどでいろいろ変えていったので
ぐちゃぐちゃな構文だったらすみません.....)
$(function() {
$("form").click(function(){
//エラーの初期化
$("p.error").remove();
$(":text,textarea").filter(".inputs").each(function(){
//必須項目のチェック
$(this).filter(".vali_required").each(function(){
if($(this).val()==""){
$('span.error').text("必須項目です")
}else{
$('span.error').remove();
}
})
$(this).filter(".num-only").each(function(){
if(isNaN($(this).val())){
$('span.error').text("半角文字で入力してください")
}else{
$('span.num_error').remove();
}
})
});
});
});
宜しくお願い致します.....
あなたの回答
tips
プレビュー