jquery-validateが動作しない
jquery-validateを使用してエラーメッセージを表示したい
該当箇所が空欄時にエラーメッセージを表示したいのですが、どうしても実行されません。
初歩的な質問で申し訳ありませんが、お力添えいただけますと助かります。
よろしくお願いいたします。
該当のソースコード
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
<script src="js/script.js">
$('.form').validate({
rules: {
name: {
required: true
},
mail: {
required: true
},
tel: {
required: true
},
text: {
required: true
}
},
messages: {
name: {
required: 'お名前を入力してください'
},
mail: {
required: 'メールアドレスを入力してください'
},
tel: {
required: '電話番号を入力してください'
},
text: {
required: '詳細を入力してください'
}
}
});
</script>
<div class="form">
<div class="form-Item Item">
<p class="form-Item-Label">お名前</p>
<input type="text" name="name" class="form-Item-Input" placeholder="お名前">
</div>
<div class="form-Item Item">
<p class="form-Item-Label">メールアドレス</p>
<input type="email" name="mail" class="form-Item-Input" placeholder="sample@abc.jp">
</div>
<div class="form-Item Item">
<p class="form-Item-Label">電話番号</p>
<input type="text" name="tel" class="form-Item-Input" placeholder="09012345678">
</div>
<div class="form-Item">
<p class="form-Item-Label">お問い合わせ内容</p>
<textarea class="form-Item-Textarea" name="text" placeholder="ご希望のキーワードなどございましたら、こちらにご記入ください。"></textarea>
</div>
<input type="submit" class="form-Btn" value="送信する">
</div>
1 likes
