如何让Bootstrap 5表单验证不在用户输入前立即显示？

你的问题出在表单上的was-validated类——Bootstrap 5会在页面加载时自动对带有这个类的表单执行验证，导致未交互就显示提示。要实现仅在用户输入/交互后才展示验证提示，可以按以下方式调整：

解决步骤 #

• 移除表单的was-validated类：这个类是强制页面加载时触发验证的根源，先去掉它。
• 为表单控件添加交互事件监听：给输入框、文本框、复选框绑定input或change事件，用户操作控件时手动触发验证逻辑，并给父容器添加对应的验证状态类。
• 保留提交时的全局验证：提交表单时仍需检查所有字段，确保数据符合要求。

修改后的完整代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<form action=" " id="validationForm">
  <div class="userid mb-3">
    <label for="uid" class="form-label"> User Name: </label>
    <input type="text" class="form-control" id="uid" placeholder="Enter user_name" name="uid" required>
    <div class="valid-feedback"> Valid data. </div>
    <div class="invalid-feedback"> Please fill the user name. </div>
  </div>
  <div class="emailid mb-3">
    <label for="emid" class="form-label"> Email Id: </label>
    <input type="email" class="form-control" id="emid" placeholder="Enter email_id" name="emid" required>
    <div class="valid-feedback"> Valid data. </div>
    <div class="invalid-feedback"> Please fill the email id. </div>
  </div>
  <div class="numberid mb-3">
    <label for="numid" class="form-label"> Mobile Number: </label>
    <input type="number" class="form-control" id="numid" placeholder="Enter Mobile Number" name="numid" required>
    <div class="valid-feedback"> Valid data. </div>
    <div class="invalid-feedback"> Please fill the mobile number. </div>
  </div>
  <div class="txt mb-3">
    <label for="txt" class="form-label"> Message: </label>
    <textarea class="form-control" id="txt" placeholder="Enter message" name="txt" required></textarea>
    <div class="valid-feedback"> Valid data. </div>
    <div class="invalid-feedback"> Please fill the message. </div>
  </div>
  <div class="form-check mb-3">
    <input class="form-check-input" type="checkbox" id="Checked" name="remembers" required>
    <label class="form-check-label" for="Checked"> I agree on form validation.</label>
    <div class="valid-feedback"> </div>
    <div class="invalid-feedback"> Please agree to the terms. </div>
  </div>
  <button type="submit" class="btn btn-info mt-2"> Submit </button>
</form>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script>
  // 获取表单和所有需要验证的控件
  const form = document.getElementById('validationForm');
  const inputs = form.querySelectorAll('input, textarea');

  // 为每个控件添加交互事件监听
  inputs.forEach(input => {
    // 输入框/文本框监听input事件，复选框监听change事件
    const eventType = input.type === 'checkbox' ? 'change' : 'input';
    input.addEventListener(eventType, function() {
      // 手动触发控件验证
      this.checkValidity();
      // 获取父容器，添加验证状态类
      const parent = this.closest('.userid, .emailid, .numberid, .txt, .form-check');
      parent.classList.add('was-validated');
    });
  });

  // 表单提交时的全局验证
  form.addEventListener('submit', function(e) {
    if (!form.checkValidity()) {
      e.preventDefault();
      e.stopPropagation();
    }
    // 提交时给整个表单添加验证类，确保所有字段都显示状态
    form.classList.add('was-validated');
  });
</script>

额外说明 #

• 修复了原代码中ID的空格问题（比如id=" uid "改成id="uid"），避免选择器失效。
• 给复选框的invalid-feedback补充了提示文本，提升用户体验。
• 交互时给单个控件的父容器添加was-validated，只触发当前控件的提示；提交时给整个表单添加该类，确保所有未交互的必填字段也显示提示。

内容的提问来源于stack exchange，提问作者rotibakar