jQuery驗證錯誤重疊

Question

在窗體上使用jQuery驗證插件。 我在字段上有多個參數和錯誤消息。 錯誤消息重疊，我該如何解決這個問題？ 當我開始輸入時，不需要第一條消息消失嗎？

感謝您的任何幫助。

<script>  
    jQuery(document).ready(function() { 


    // validate signup form on keyup and submit 
    $("#entry-form").validate({ 
     rules: { 
      fname: {  required: true, 
          minlength:2 
      },  
      lname: {  required: true, 
          minlength:2 
      },  
      advisor_id: { required: true, 
          digits: true, 
          rangelength: [8,8] 
      },  
      email: {  required: true, 
          email: true, 
          remote: "emails.action" 
      }, 
      agree:   "required" 
     }, 
     messages: { 
      fname: {  required: "Please Enter your firstname", 
          minlength: "You must enter at least 2 characters"}, 
      lname: {  required: "Please Enter your lastname", 
          minlength: "You must enter at least 2 characters"}, 
      advisor_id: { required: "You must enter your Advisor ID", 
          digits: "Your Advisor ID should only contain numbers", 
          rangelength:"Your Advisor ID should be 8 characters" 
      },  
      email: {  required: "Please enter a valid email address", 
          minlength: "Please enter a valid email address", 
      }, 
      agree:   "You must agree to our terms " 
     }, 
     // the errorPlacement 
     errorPlacement: function(error, element) { 
      if (element.is(":checkbox")) 
       error.appendTo(element.next()); 
      else if (element.is(":input")) 
       error.insertAfter(element); 
     }, 
     // specifying a submitHandler prevents the default submit, good for the demo 
     submitHandler: function() { 
      alert("submitted!"); 
     }, 
    }); 

}); 
</script> 

     <form method="post" id="entry-form" action="inc/submission.php"> 
      <input type="text" name="fname" id="fname" placeholder="First Name" /> 
      <input type="text" name="lname" id="lname" placeholder="Last Name" /> 
      <input type="text" name="advisor_id" id="advisor_id" placeholder="Advisor ID" /> 
      <input type="email" name="email" id="email" placeholder="Email Address" /> 
      <div class="agree-to-rules"><input type="checkbox" name="agree" id="agree" required /><label for="checkbox"> I agree to contest <a href="#">Rules &amp; Regulations</a></label></div> 
      <input type="submit" value="Enter Now" name="submit" id="submit" /> 
     </form> 

jquery Validate Error messages http://rdiv.com/screenshots/jqueryValidateError.png 所有3個錯誤都在這裏展示在同一時間。

Answer 1

在檢查了your test page的DOM後，我可以看到JavaScript正常工作。換句話說，一次只能在DOM中顯示一條驗證消息。

使用DOM工具，我已禁用您的position: relative屬性上這些錯誤label元素和問題消失。但是，現在你的信息不合適。

label#advisor_id-error.error { 
    color:red; 
    font-size:14px; 
    font-style:italic; 
    position: relative; /* <- here */ 
    top: 30px;   /* <- here */ 
    left: -120px;  /* <- here */ 
} 

我不能完全解釋如何或爲何position: relative是造成這三條消息停留在屏幕上呈現，而不是在DOM出現。

但是，我的建議是使用插件的the errorElement option將默認label更改爲div。這將導致消息出現根據,input根據您的願望和消除position: relative的需要。

$("#entry-form").validate({ 
    errorElement: "div", 
    .... 

IMO，這將是更好地使用所提供的選項來動態地把這些消息更接近您想要的地方，而不是在CSS改變position財產。

---

編輯：

我認爲，雖然該插件正確撥動relative元素（堪爲DOM）的內容和知名度，你已經定位其內容其正常容器的外部。換句話說，包含的元素正在正確切換，但您放置在其容器外的內容不是。