webデザインの勉強をしているのですが、お問い合わせフォームにjquery validation P

webデザインの勉強をしているのですが、お問い合わせフォームにjquery validation Pluginを使ってエラーメッセージを表示させようとしたら、わざと文章を何も入れないで送信ボタンをメッセージは出るのですが、そこからまた送信ボタンを押したり一度枠の中をクリックしてから外側を押すと更にその上に新しいエラーメッセージが出てきてメッセージがたくさんになってしまいます。何か間違えているのでしょうか？

以下script部分です。

<script src="jquery.validate.min.js"></script>
<script>
$(function(){
$("#form").validate({
// 入力のルール
rules: {
// 必須項目
"name_sei": {
required: true
},
"name_mei" : {
required: true
},
"email" : {
required: true
},
"message" : {
required: true
},
},
// エラーメッセージ
messages:{
"name_sei" : {
required : "<span class='warning'>・お名前(姓)の入力を行ってください。</span><br>"
},
"name_mei" : {
required : "<span class='warning'>・お名前(名)の入力を行ってください。</span><br>"
},
"email" : {
required: "<span class='warning'>・メールアドレスの入力を行ってください。</span><br>"
},
"message" : {
required: "<span class='warning'>・お問い合わせ内容の入力を行ってください。</span><br>

errorPlacement: function(error, element){
error.insertBefore("#form");
}
});
});
</script>

質問者からの補足コメント

• ×わざと文章を何も入れないで送信ボタンをメッセージは出るのですが、
  ○ わざと文章を何も入れないで送信ボタンを押すとメッセージは出るのですが、

    補足日時：2021/10/06 23:53

No.1 ベストアンサー 回答者： くんこば 回答日時： 2021/10/06 23:48

部品を小さくしてから検証しましょう。

この回答へのお礼

部品を小さくというのは項目を少なくするということですか？

お礼日時：2021/10/06 23:52