Bootstrap 5在提交时验证，但未显示无效字段提示

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="name" class="form-label">Name</label>
    <input type="text" class="form-control" id="name" required>
    <div class="invalid-feedback">
      Please enter a name.
    </div>
  </div>
  <!-- 其他表单字段 -->
  <button class="btn btn-primary" type="submit">Submit</button>
</form>

// 获取表单元素
var form = document.querySelector('.needs-validation');

// 在提交表单时执行验证
form.addEventListener('submit', function(event) {
  if (!form.checkValidity()) {
    event.preventDefault(); // 阻止表单提交
    event.stopPropagation(); // 阻止事件冒泡
  }
  form.classList.add('was-validated'); // 添加验证样式类
});