title: Bootstrap-3: Input Group-Addon STRETCHES with jQuery Validation messages
body: <p>I'm using Twitter Bootstrap 3 with jQuery Validate plugin, but for some reason when the validation error message pops up it <strong>STRETCHES</strong> my <strong>Input Group-Addon</strong> box and the icon.</p>
  
  <p><strong>NORMAL [NO VALIDATION]</strong></p>
  
  <p><a href="https://i.stack.imgur.com/38yiZ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/38yiZ.jpg" alt="normal input add-on size"></a></p>
  
  <p><strong>WITH VALIDATION</strong>
  <a href="https://i.stack.imgur.com/E7otC.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E7otC.jpg" alt="Validation error stretches input group-addon"></a></p>
  
  <p>Here's my Fiddle in case you want to solve the problem: <a href="https://jsfiddle.net/woagrr2q/1/" rel="nofollow noreferrer">My Fiddle</a></p>
  
  <blockquote>
    <p>I've tried multiple solutions on the web such as </p>
    
    <p><a href="https://github.com/victorjonsson/jQuery-Form-Validator/issues/126" rel="nofollow noreferrer">GitHub Issue of Input Addon</a> and <a href="https://stackoverflow.com/questions/21610787/twitter-bootstrap-3-input-add-on-with-validation-issue">Input Addon issue on Stack
    Overflow</a></p>
    
    <p>But I can't seem to fix the problem, no matter what I try. </p>
  </blockquote>
  
  <p><strong>Please let me know what do I have to do to prevent the INPUT GROUP-ADDON from stretching when the validation errors appear. Thank you!</strong></p>
  
  <p>My main code is provided below:</p>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$('.login-form').validate ({
          // validation rules for registration form
      errorClass: "error-class",
      validClass: "valid-class",  
      onError : function(){
          $('.input-group.error-class').find('.help-block.form-error').each(function() {
            $(this).closest('.form-group').addClass('error-class').append($(this));
          });
      },
  
          rules: {
              username: {
                  required: true,
                  minlength: 3,
                  maxlength: 40
              },
  
            password: {
                  required: true,
                  minlength: 7,
                  maxlength: 20
              }
              },
  
          messages: {
              username: {
                  required: "Please enter your username or email address",
                  minlength: "Usernames can't be shorter than three characters",
                  maxlength: "Usernames or emails must be shorter than forty characters."
              },
                         password: {
                  required: "Please enter your password",
                  minlength: "Passwords can't be shorter than seven characters",
                  maxlength: "Passwords must be shorter than forty characters."
              },
  
                  highlight: function(element, errorClass) {
          $(element).removeClass(errorClass);
      }    
          },
  
    submitHandler: function() {  
              $('#noenter').show();   
  
          }  
      });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!-- Modal --&gt;
  &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
    &lt;form class="login-form" action="login" method="post" action="../PHP/ValidateForm.php"&gt;
      &lt;div class="modal-dialog" role="document"&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
            &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
            &lt;h4 class="modal-title" style="color:red;" id="myModalLabel"&gt;TITLE&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
            &lt;!-- Text input--&gt;
            &lt;div class="form-group"&gt;
  
              &lt;div class="input-group"&gt;
                &lt;span class="input-group-addon"&gt;&lt;i class="fa fa-2x fa-user"&gt;&lt;/i&gt;&lt;/span&gt;
                &lt;input required id="username" name="username" placeholder="Username or Email" class="inputfield form-control" type="text"&gt;
  
  
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;!-- Text input--&gt;
            &lt;div class="form-group"&gt;
  
              &lt;div class="input-group"&gt;
                &lt;span class="input-group-addon"&gt;&lt;i class="fa fa-2x fa-lock"&gt;&lt;/i&gt;&lt;/span&gt;
                &lt;input required id="password" name="password" placeholder="Password" class="form-control" type="password"&gt;
  
  
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="error"&gt;
  
            &lt;/div&gt;
            &lt;input title="Log In" name="submit" value="Log In" type="submit" class="loginbtn btn btn-lg btn-block"&gt;
          &lt;/div&gt;
  
          &lt;p class="text-muted"&gt;&lt;strong&gt;Need an account? &lt;a href="#"&gt;Join &lt;/a&gt;&lt;/strong&gt;
  
          &lt;/p&gt;
  
  
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.form-control {
    color: #000 !important;
  }
  
  form label.error-class {
    font: 15px Tahoma, sans-serif;
    color: #ED7476;
    margin-left: 5px;
    position: relative;
  }
  
  form input.error-class,
  form input.error-class:hover,
  form input.error:focus,
  form select.error-class,
  form textarea.error-class {
    background: #FFEDED;
  }
  
  .error-class {
    color: red;
    z-index: 0;
    position: relative;
    display: inline-block;
  }
  
  .valid-class {
    color: black;
  }
  </code></pre>