title: Bootstrap 4: add a "scroll to first invalid field" to a don't "Submit" if invalid script
body: <p>I am using <code>Bootstrap 4</code> and i am stopping form submission if any of the fields are invalid with the below script.
  I am trying to figure out (with no success so far) what code do i need to add after the "<strong><code>event.stopPropagation();</code></strong>" in order to make the form scroll to the first invalid field that was found.
  Appreciate your help, thanks. </p>
  
  <p>Form:</p>
  
  <pre><code>&lt;form class="needs-validation" novalidate action="search.php" id="firstform" method="post" &gt;
  </code></pre>
  
  <p>Prevent submission if invalid:</p>
  
  <pre><code>  &lt;script&gt;
  // Example starter JavaScript for disabling form submissions if there are invalid fields
  (function() {
    'use strict';
    window.addEventListener('load', function() {
      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      var forms = document.getElementsByClassName('needs-validation');
      // Loop over them and prevent submission
      var validation = Array.prototype.filter.call(forms, function(form) {
        form.addEventListener('submit', function(event) {
          if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
          }
          form.classList.add('was-validated');
        }, false);
      });
    }, false);
  })();
  &lt;/script&gt;
  </code></pre>
  
  <p>Found the below code but couldn't find a way to embed it into the "disabling form submissions" script or use it as a standalone script:</p>
  
  <pre><code>$("#firstform").validate({
      focusInvalid: false,
      invalidHandler: function(form, validator) {
  
          if (!validator.numberOfInvalids())
              return;
  
          $('html, body').animate({
              scrollTop: $(validator.errorList[0].element).offset().top
          }, 2000);
  
      }
  });
  </code></pre>