Bootstrap表单使用浏览器自动填充数据时不显示验证状态如何解决？

问题现象 #

手动输入数据时，Bootstrap 5表单可正常显示验证通过的绿色对勾；但使用浏览器保存的自动填充数据时，验证通过的状态样式（绿色对勾）无法显示。

修复方案 #

浏览器自动填充字段不会触发常规的input/change事件，导致Bootstrap的验证逻辑未被激活，也不会添加was-validated类来展示验证样式。我们需要主动捕获自动填充行为并触发验证：

具体实现步骤 #

• 新增animationstart事件监听：部分浏览器（如Chrome）自动填充时会触发webkit-autofill相关动画，通过监听该事件可以更精准捕获自动填充动作
• 对自动填充字段主动触发验证：调用字段的checkValidity()方法，并触发input事件同步验证状态
• 确保表单添加was-validated类：让Bootstrap应用对应的验证样式
• 同步密码确认字段的验证：自动填充密码后，主动触发确认密码字段的验证逻辑，保证联动状态正确

修改后的完整代码 #

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags and Bootstrap CSS -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Registration Form</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    /* Optional: Adjust form width on larger screens */
    .registration-form {
      max-width: 500px;
      margin: auto;
    }

    /* Remove autofill background color in Chrome */
    input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important; /* Changes background to white */
    -webkit-text-fill-color: #000 !important; /* Ensures text remains black */
  }
  </style>
</head>
<body>

<div class="container mt-5">
  <div class="registration-form">
    <div class="card">
      <div class="card-body">
        <h3 class="card-title text-center mb-4">Register</h3>
        <form class="needs-validation" novalidate>
          <!-- First Name and Last Name -->
          <div class="row">
            <div class="col-md-6 mb-3">
              <label for="firstName" class="form-label">First Name</label>
              <input type="text" class="form-control" id="firstName" pattern="^[A-Za-z]+$" placeholder="First Name" required>
              <div class="invalid-feedback">
                Please enter your first name (letters only).
              </div>
            </div>
            <div class="col-md-6 mb-3">
              <label for="lastName" class="form-label">Last Name</label>
              <input type="text" class="form-control" id="lastName" pattern="^[A-Za-z]+$" placeholder="Last Name" required>
              <div class="invalid-feedback">
                Please enter your last name (letters only).
              </div>
            </div>
          </div>
          <!-- Email -->
          <div class="mb-3">
            <label for="emailAddress" class="form-label">Email</label>
            <input type="email" class="form-control" id="emailAddress" placeholder="Email" required>
            <div class="invalid-feedback">
              Please enter a valid email address.
            </div>
          </div>
          <!-- Password -->
          <div class="mb-3">
            <label for="password" class="form-label">Password</label>
            <input type="password" class="form-control" id="password" minlength="6" placeholder="Password" required>
            <div class="invalid-feedback">
              Please enter a password with at least 6 characters.
            </div>
          </div>
          <!-- Confirm Password -->
          <div class="mb-3">
            <label for="confirmPassword" class="form-label">Confirm Password</label>
            <input type="password" class="form-control" id="confirmPassword" minlength="6" placeholder="Confirm Password" required>
            <div class="invalid-feedback">
              Passwords do not match.
            </div>
          </div>
          <!-- Terms and Conditions -->
          <div class="form-check mb-3">
            <input type="checkbox" id="terms" class="form-check-input" required>
            <label class="form-check-label" for="terms">I agree to the terms and conditions</label>
            <div class="invalid-feedback">
              You must agree to the terms and conditions.
            </div>
          </div>
          <!-- Submit Button -->
          <div class="d-grid">
            <button class="btn btn-primary" type="submit">Register</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Bootstrap JS and custom validation script -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
(() => {
  'use strict';

  // Fetch all the forms we want to apply custom Bootstrap validation styles to
  const forms = document.querySelectorAll('.needs-validation');

  // Function to trigger validation for autofilled fields
  const triggerAutofillValidation = () => {
    forms.forEach(form => {
      // Get all input fields in the form
      const inputs = form.querySelectorAll('input');
      
      inputs.forEach(field => {
        // Check if field is autofilled
        if (field.matches('input:-webkit-autofill')) {
          // Trigger input event to activate validation
          field.dispatchEvent(new Event('input', { bubbles: true }));
          // Manually check validity to update state
          field.checkValidity();
        }
      });

      // Add was-validated class to form to show validation styles
      form.classList.add('was-validated');

      // Trigger confirm password validation if password is autofilled
      const password = form.querySelector('#password');
      const confirmPassword = form.querySelector('#confirmPassword');
      if (password.matches('input:-webkit-autofill') && confirmPassword.value) {
        confirmPassword.dispatchEvent(new Event('input', { bubbles: true }));
      }
    });
  };

  // On window load, trigger autofill validation
  window.addEventListener('load', triggerAutofillValidation);

  // Listen for webkit autofill animation (works for Chrome-based browsers)
  document.addEventListener('animationstart', (e) => {
    if (e.animationName === 'webkit-autofill') {
      setTimeout(triggerAutofillValidation, 10);
    }
  });

  // Loop over each form and prevent submission if invalid
  Array.from(forms).forEach(form => {
    // Password and Confirm Password fields
    const password = form.querySelector('#password');
    const confirmPassword = form.querySelector('#confirmPassword');

    // Event listener to validate password match
    confirmPassword.addEventListener('input', function () {
      if (confirmPassword.value !== password.value) {
        confirmPassword.setCustomValidity('Passwords do not match');
      } else {
        confirmPassword.setCustomValidity('');
      }
    });

    // Form submission event
    form.addEventListener('submit', event => {
      // Check for validity
      if (!form.checkValidity()) {
        event.preventDefault();
        event.stopPropagation();
      }

      // Add Bootstrap validation classes
      form.classList.add('was-validated');
    }, false);

  });
})();
</script>

</body>
</html>

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