Bootstrap Modal中的HTML5验证，在提交时聚焦错误

<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">表单</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="myForm" novalidate>
          <div class="form-group">
            <label for="name">姓名</label>
            <input type="text" class="form-control" id="name" required>
          </div>
          <div class="form-group">
            <label for="email">邮箱</label>
            <input type="email" class="form-control" id="email" required>
          </div>
          <div class="form-group">
            <label for="password">密码</label>
            <input type="password" class="form-control" id="password" required>
          </div>
          <button type="submit" class="btn btn-primary">提交</button>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
  // 表单提交事件
  document.getElementById("myForm").addEventListener("submit", function(event) {
    if (!this.checkValidity()) {
      event.preventDefault(); // 阻止表单提交
      event.stopPropagation(); // 阻止事件冒泡
      this.classList.add("was-validated"); // 添加验证样式
      // 聚焦第一个验证错误的输入字段
      var firstInvalidInput = this.querySelector(".form-control:invalid");
      if (firstInvalidInput) {
        firstInvalidInput.focus();
      }
    }
  });
</script>