Повторение размещения ошибки проверки JQuery

Question

1. Всякий раз, когда появляется ошибка, она обычно повторяется в другой строке, как вы можете видеть из примера изображения.

2. И по какой-то причине пользовательские сообщения тоже не появляются, когда я нажимаю на кнопку отправки, появляется сообщение Это поле обязательно для заполнения пользовательские сообщения больше не работают?

Любая помощь в том, как решить эту проблему, будет удивительной, я пытался выяснить это в течение 3 дней, но не могу найти какую-либо помощь онлайн. Я новичок в JQuery Validation, поэтому, пожалуйста, будьте подробны в своем ответе. Спасибо!

Код JQuery: Я использую Bootstrap 4 и jQuery 3.2.1, и jQuery Validate

$('.contactForm').validate ({

  errorPlacement: function(error, element) {
     error.appendTo('.error');
   },

        rules: {
            fullname: {
                required: true,
                minlength: 5,
                maxlength: 20
            },

          email: {
                required: true,
                minlength: 8,
                maxlength: 40
            },
            subject: {
                required: true,
                minlength: 4,
                maxlength: 33
            },

            comment: {
                required: true,
                minlength: 10,
            },

        messages: {
            fullname: {
                required: "Please enter your first and last name",
                minlength: "Names can't be shorter than 5 characters",
                maxlength: "Names can't be longer than 20 characters"
            },
             email: {
                required: "Please enter your full email address",
                minlength: "Emails can't be shorter than 8 characters",
                maxlength: "Emails can't be longer than 40 characters"
            },
                  subject: {
                required: "Please enter a subject for your message",
                minlength: "Subjects can't be shorter than 4 characters",
                maxlength: "Subjects can't be longer than 33 characters"
            },
                  comment: {
                required: "Please type your message here",
                minlength: "Message must be at least 10 characters long"
            },

                highlight: function(element, errorClass) {
        $(element).removeClass(errorClass);
    }    
        },

  submitHandler: function() {  
            $('#noenter').show();   

        }
}
    });

HTML:

<form class="contactForm" method="post" action="">
 <div class="form-row mx-3">
   <div class="forms col-md-12 mb-3">
   <label class="bigsentence text-white font-weight-bold" for="fullname"><i class="text-danger pr-1 fas fa-id-card"></i>Name:<span class="ml-2 text-danger error"></span> </label>
   <input type="text" class="form-control" name="fullname" id="fullname" placeholder="Your Full Name"> 
   </div>

   <div class="forms col-md-12 mb-3">
   <label class="bigsentence text-white font-weight-bold" for="email"><i class="text-danger pr-1 fas fa-at"></i>Email:<span class="ml-2 text-danger error"></span></label>
   <input type="email" name="email" class="form-control" id="email" placeholder="Your Email Address"> 
   </div>

   <div class="forms col-md-12 mb-3">
   <label class="bigsentence text-white font-weight-bold" for="subject"><i class="text-danger pr-1 fas fa-info-circle"></i>Subject: <span class="ml-2 text-danger error"></span></label>
   <input type="text" name="subject" class="form-control" id="subject" placeholder="Reason for contact"> 
   </div>

   <div  class="col-md-12 mb-3">
   <div class="forms form-group">
   <label class="bigsentence font-weight-bold text-white" for="comment"><i class="text-danger pr-1 fas fa-pen-square"></i>Message: <span class="ml-2 text-danger error"></span></label>
   <textarea type="text" name="comment" class="form-control" rows="4" id="comment" placeholder="Type your message here"></textarea>
   </div>
   </div>
 <div  class="col-md-12 mb-3">

 <button style="max-width:280px;" name="send" type="submit" class="rsvpbtn btn btn-block btn-danger sendmessage">SEND MESSAGE</button>

</div>
  </div>

</form>

Answer 1

Ваша errorPlacement функция использует только класс, который найден во всех элементах ошибки. Поэтому каждая ошибка добавляется ко всем четырем элементам ошибки.

Используйте это вместо:

error.appendTo(element.parent().find("span"));