jquery-validateが動作しない

jquery-validateを使用してエラーメッセージを表示したい

該当箇所が空欄時にエラーメッセージを表示したいのですが、どうしても実行されません。
初歩的な質問で申し訳ありませんが、お力添えいただけますと助かります。
よろしくお願いいたします。

該当のソースコード

JS
1 <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="crossorigin="anonymous"></script>
2 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
3 <script src="js/script.js">
4
5$('.form').validate({
6 
7  rules: {
8
9      name: {
10          required: true
11      },
12      mail: {
13          required: true
14      },
15      tel: {
16          required: true
17      },
18      text: {
19          required: true
20      }
21
22  },
23
24  messages: {
25
26      name: {
27          required: 'お名前を入力してください'
28      },
29      mail: {
30          required: 'メールアドレスを入力してください'
31      },
32      tel: {
33          required: '電話番号を入力してください'
34      },
35      text: {
36          required: '詳細を入力してください'
37      }
38
39
40  }
41});
42    </script>

HTML
1<div class="form">
2
3         <div class="form-Item Item">
4             <p class="form-Item-Label">お名前</p>
5             <input type="text" name="name" class="form-Item-Input" placeholder="お名前">
6         </div>
7        
8         <div class="form-Item Item">
9             <p class="form-Item-Label">メールアドレス</p>
10             <input type="email" name="mail" class="form-Item-Input" placeholder="sample@abc.jp">
11         </div>
12
13         <div class="form-Item Item">
14             <p class="form-Item-Label">電話番号</p>
15             <input type="text" name="tel" class="form-Item-Input" placeholder="09012345678">
16         </div>
17
18         <div class="form-Item">
19             <p class="form-Item-Label">お問い合わせ内容</p>
20             <textarea class="form-Item-Textarea" name="text" placeholder="ご希望のキーワードなどございましたら、こちらにご記入ください。"></textarea>
21         </div>
22         
23         
24         <input type="submit" class="form-Btn" value="送信する">
25        
26</div>

行動規範の内容に同意します

回答2件

<script src="js/script.js">...</script>のように src属性をつけると、script要素の中に書かれたコードは実行されないです。

投稿2023/07/07 05:05

Lhankor_Mhy

総合スコア36898

ベストアンサー

単純にformの設定がされていないのが一番の原因でしょう

javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
2<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
3<script>
4$(function(){
5  $('.form').validate({
6  rules: {
7  name: {
8  required: true
9  },
10  mail: {
11  required: true
12  },
13  tel: {
14  required: true
15  },
16  text: {
17  required: true
18  }
19  },
20  messages: {
21  name: {
22  required: 'お名前を入力してください'
23  },
24  mail: {
25  required: 'メールアドレスを入力してください'
26  },
27  tel: {
28  required: '電話番号を入力してください'
29  },
30  text: {
31  required: '詳細を入力してください'
32  }
33  }
34  });
35});
36</script>
37<form class="form">
38<div class="form-Item Item">
39<p class="form-Item-Label">お名前</p>
40<input type="text" name="name" class="form-Item-Input" placeholder="お名前">
41</div>
42<div class="form-Item Item">
43<p class="form-Item-Label">メールアドレス</p>
44<input type="email" name="mail" class="form-Item-Input" placeholder="sample@abc.jp">
45</div>
46<div class="form-Item Item">
47<p class="form-Item-Label">電話番号</p>
48<input type="text" name="tel" class="form-Item-Input" placeholder="09012345678">
49</div>
50<div class="form-Item">
51<p class="form-Item-Label">お問い合わせ内容</p>
52<textarea class="form-Item-Textarea" name="text" placeholder="ご希望のキーワードなどございましたら、こちらにご記入ください。"></textarea>
53</div>
54<input type="submit" class="form-Btn" value="送信する">
55</form>