Question

1。每当弹出错误时，它通常会重复到另一行，如示例图像所示。

2。由于某些原因，自定义消息也没有显示，当我点击提交时，显示此字段是必需的，自定义消息是否不再有效？

任何有关如何解决这个问题的帮助都会很惊人，我已经试图解决这个问题3天了，但无法在网上找到任何帮助。我是JQuery验证中的菜鸟，所以请在回复中详细说明。谢谢！

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"));

JQuery验证错误放置重复自身

1 个答案: