HTML5 form invalid hint scroll with fixed bar

html5-form-invalid-hint-scroll-with-fixed-bar.js

function scrollToInvalid() {
  // Height of your nav bar plus a bottom margin
  var navHeight = $('header.navbar-fixed-top').height() + 20;
  // Offset of the first input element minus your nav height
  var invalid_el = $('input:invalid,select:invalid,textarea:invalid').first().offset().top - navHeight;

  // If the invalid element is already within the window view, return true. If you return false, the validation will stop.
  if ( invalid_el > (window.pageYOffset - navHeight) && invalid_el < (window.pageYOffset + window.innerHeight - navHeight) ) {
    return true;
  } else {
    // If the first invalid input is not within the current view, scroll to it.
    $('html, body').scrollTop(invalid_el);
  }
}
      
$('input,select,textarea').on('invalid', scrollToInvalid);