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

Bootstrap是一个流行的前端开发框架，它提供了许多易于使用的组件和工具，用于构建响应式网站和Web应用程序。

在Bootstrap 5中，可以使用表单验证插件来验证用户提交的表单数据。表单验证插件可以在用户提交表单时自动验证字段，并显示无效字段的提示信息。

要在Bootstrap 5中实现提交时的验证，并显示无效字段的提示信息，可以按照以下步骤进行操作：

引入Bootstrap 5的CSS和JavaScript文件：

<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>

在HTML表单中添加必要的验证标记：

<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>

编写JavaScript代码，以启用表单验证：

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

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

通过上述步骤，当用户提交表单时，Bootstrap 5会自动验证字段，并根据验证结果显示相应的提示信息。如果字段无效，相关字段的边框颜色会变为红色，并显示相应的错误提示信息。

值得注意的是，为了确保验证功能的正常工作，表单标签必须包含novalidate属性，同时在表单元素的父级容器上添加needs-validation类。

对于Bootstrap 5以外的云计算产品和服务，建议参考腾讯云的相关产品，具体推荐如下：

腾讯云云服务器（CVM）：提供弹性扩展的虚拟云服务器实例，适用于搭建和部署应用程序、网站托管等场景。了解更多信息请访问：腾讯云云服务器
腾讯云对象存储（COS）：提供高可靠、低成本的云存储服务，用于存储和管理海量数据，适用于图片、视频、文档等文件的存储和分发。了解更多信息请访问：腾讯云对象存储
腾讯云云数据库MySQL版（TencentDB for MySQL）：提供稳定可靠的云数据库服务，支持自动备份、容灾、读写分离等功能，适用于各类Web应用程序的数据存储和管理。了解更多信息请访问：腾讯云云数据库MySQL版

这些腾讯云产品提供了强大的功能和可靠的性能，可以满足各种云计算需求。