Проверка HTML5 не срабатывает, когда поля недоступны

Question

У меня есть форма с несколькими полями, и мне нужно прокрутить 10-15 полей до кнопки отправки.Я хочу проверить, является ли форма действительной или нет с помощью jquery.Если первое поле моей формы является обязательным, и я нажимаю кнопку «Отправить», границы поля становятся красными, но сообщение не отображается.Если я удаляю все обязательные поля сверху и просто добавляю последние поля по мере необходимости, отображается сообщение.Если я изменю размер браузера, чтобы при первом нажатии отображать первое поле, появится сообщение проверки.Работает ли эта функция (reportValidity) с недоступными полями?

$('form').each(function() {
  var $form = $(this);
  $form.find(':submit').on({
    'mousedown': function(e) {
      var form = $(this).closest('form')[0];
      if (form.checkValidity()) {} else {
        form.reportValidity();
      }
    },
  });
});

.test {
  margin-bottom: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="test">
    <label>Email:
      <input name=email type=text required title="enter your email">
    </label>
    <br>
  </div>
  <div class="test">
    <label>Email:
      <input name=email type=text required title="enter your email">
    </label>
    <br>
  </div>
  <div class="test">
    <label>Email:
      <input name=email type=text required title="enter your email">
    </label>
    <br>
  </div>
  <input type=submit>

</form>

Answer 1

Эту проблему можно решить, добавив event.preventDefault () перед вызовом reportValidity ().