twbs / twbs/bootstrap

Form Validation does not work when browser saved data is used.

Open
#40,879 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

css v5
Dominant language
MDX
Stars
175k
Forks
78.6k
Avg merge
7h 19m
Merged PRs (30d)
35

Description

Prerequisites
Describe the issue

On below registration form the form validation, which is the tick does not show when the user uses the browser saved data, but shows up the when user enter the data manually. Below images show for reference,

When manually entered,
one

When used the browser saved data,
two

Please refer the below code

<!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');

  // Trigger validation for autofilled fields on page load
  const triggerAutofillValidation = () => {
    const autofillFields = document.querySelectorAll('input:-webkit-autofill');

    // Dispatch an input event for each autofilled field to trigger validation
    autofillFields.forEach(field => {
      field.dispatchEvent(new Event('input', { bubbles: true }));
    });
  };

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

  // 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>
Reduced test cases

None

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome, Microsoft Edge

What version of Bootstrap are you using?

v5.3.3

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The issue supplies an inline registration form and custom JavaScript rather than a repository file or test. Start by reproducing the behavior in Chrome or Edge with saved form data, then compare it with manually entered values. Done means the validation state is consistent for both input methods, with the relevant behavior covered by a reproducible test.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html, javascript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.