title: jQuery Validate errors overlapping
body: <p>Using jQuery Validate plugin on form.
  I have multiple parameters and error messages on fields.
  The error messages overlap, how can I fix this?
  Shouldn't the first message from required disappear as I start typing?</p>
  
  <p>Thanks for any help.</p>
  
  <pre><code>&lt;script&gt;      
      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!");
          },
      });
  
  });
  &lt;/script&gt;
  
          &lt;form method="post" id="entry-form" action="inc/submission.php"&gt;
              &lt;input type="text"  name="fname" id="fname" placeholder="First Name" /&gt;
              &lt;input type="text"  name="lname" id="lname" placeholder="Last Name"  /&gt;
              &lt;input type="text"  name="advisor_id" id="advisor_id" placeholder="Advisor ID"  /&gt; 
              &lt;input type="email" name="email" id="email" placeholder="Email Address"  /&gt;
              &lt;div class="agree-to-rules"&gt;&lt;input type="checkbox" name="agree" id="agree" required /&gt;&lt;label for="checkbox"&gt; I agree to contest &lt;a href="#"&gt;Rules &amp;amp; Regulations&lt;/a&gt;&lt;/label&gt;&lt;/div&gt;
              &lt;input type="submit" value="Enter Now" name="submit" id="submit"  /&gt;
         &lt;/form&gt;  
  </code></pre>
  
  <p><a href="http://rdiv.com/screenshots/jqueryValidateError.png" rel="nofollow noreferrer">jquery Validate Error messages http://rdiv.com/screenshots/jqueryValidateError.png</a>
  All 3 errors are showing here at the same time.</p>