title: After groups validation error textbox's position is changing
body: <p>I have used group validations of jquery validations to validate phone number which contains 3 textbox. My code will display single validation error for 3 textbox. But if validation error occurs then textbox position is changing.  Following is my code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
      &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="jquery_validation.js"&gt;&lt;/script&gt;
      &lt;style&gt;
          .error{
              color: hsl(0, 100%, 50%);
              float: left;
              font: 10px/17px "Lato Reg",arial;
              width: 50%;
          }
          .sm_input{width:20%!important;margin-right: 3%;}
          .mid_input{width:36%!important;}
      &lt;/style&gt;
      &lt;script&gt;
          $(document).ready(function() {
  
  
                  $("#form1").validate({
                      groups: {
                          phoneNumber: "phone_no_1 phone_no_2 phone_no_3"
                      },
                      rules: {
                          'phone_no_1': {
                              required: true,
                              minlength: 3,
                              maxlength: 3,
                              number: true
                          },
                          'phone_no_2': {
                              required: true,
                              minlength: 3,
                              maxlength: 3,
                              number: true
                          },
                          'phone_no_3': {
                              required: true,
                              minlength: 4,
                              maxlength: 4,
                              number: true
                          }
                      },
                      errorPlacement: function(error, element) {
                          if (element.attr("name") == "phone_no_1"
                                  || element.attr("name") == "phone_no_2" || element.attr("name") == "phone_no_3")
                              error.insertAfter("#phone_no");
                          else
                              error.insertAfter(element);
                      }
  
              });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1"&gt;
  
          &lt;label&gt;Phone Number&lt;/label&gt;
  
          &lt;input  type="text" class="sm_input" name="phone_no_1" id="phone_no_1" maxlength="3" size="3" tabIndex=1&gt; &lt;input  type="text" class="sm_input" name="phone_no_2" id="phone_no_2" maxlength="3" size="3" tabindex=1 &gt;   &lt;input  type="text" class="mid_input" name="phone_no_3" id="phone_no_3" maxlength="4" size="4" tabindex=3 &gt; 
          &lt;label id="phone_no"&gt;&lt;/label&gt;
          &lt;div class="clear"&gt;&lt;/div&gt;
  
  
  
  
      &lt;/form&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is what happens when error occurs<img src="https://i.stack.imgur.com/rDz1m.png" alt="enter image description here"></p>