Jqueryでのバリデーションがうまくいきません....

失礼いたします。
今、お問い合わせフォームで「送信時にバリデーションする」ということを
勉強しているのですが、どうしてもうまくいきません。
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();
}
})
});
});
});
宜しくお願い致します.....

FiroProchainezo

2019/08/13 10:11

ソースコードは、コードブロック [``` ソースコード ```] で囲んでください。また、提示のコードはhtml要素が無かったり、script要素が無かったりするので不完全なものと思います。この状態ですと、そもそもjqeuryは読み込まれているのか？等の疑問が生じますので、可能な限り全文を提供ください。

退会済みユーザー

2019/08/13 10:22

「上手くいきません」とか「いくらやっても」とかぼやかさずに、「何をやったがこういう理由のためできなかった」かを編集して書いてください。

退会済みユーザー

2019/08/13 10:50

なぜそんなにも皆さんひねくれているのですか？どうすればうまくいくのかアドバイスしていただきたいだけなのですが。もう結構です