質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.08%

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

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 292
退会済みユーザー

退会済みユーザー

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • FiroProchainezo

    2019/08/13 19:11

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

    キャンセル

  • yukke_

    2019/08/13 19:22

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

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2019/08/13 19:50

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

    キャンセル

  • m.ts10806

    2019/08/13 21:56

    ひねくれているもなにも「質問するときのヒント」というガイドラインがあるのです。
    https://teratail.com/help/question-tips

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.08%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る