title: Bad display of errors messages
body: <p>I have encountered a problem while trying to display HTML5 error messages when submitting a form as shown in <a href="http://i.stack.imgur.com/LqWRO.png" rel="nofollow">this screen shot</a>: </p>
  
  <p>The dark gray bar on top is my navigation bar.</p>
  
  <p>The problem is that my form is a little long, so you have to scroll down to confirm. However, if one has not filled out a field that contains a required tag, the page will automatically slide up to show the error message. The problem is that the error message covers my navigation bar which holds a field for filling in the required information.</p>
  
  <p>I'd like for my page scroll a little further so that both the navigation bar and error message are visible.</p>
  
  <p>I also use bootstrapping.</p>
  
  <p>Code from the comment below:</p>
  
  <pre><code>var animate = true;
  $( "input,select,textarea" ).bind( "invalid", function() {
      console.log('Invalid');
      var offset = $(this).offset();
      offset.top -= 200;
      if (animate) {
          animate = false;
          $('html, body').animate({ scrollTop: offset.top }, 10, function() {
              animate = true;
          });
      }
  }); 
  </code></pre>
  
  <p>Thank you in advance,</p>