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

可以通过在reportValidity（）调用之前添加event.preventDefault（）来解决。

当字段不可访问时，HTML5验证不会触发

1 个答案: