'How many autocomplete attributes can you have in one form?

Is there a limit on how many autocomplete attributes you can have in a single form? It seems if I have a variation of three or more autocomplete attributes on inputs the browser autofill still works. If I just have one attribute added it works just fine. Is there a reason why this is happening? I really cannot find an answer on the web or anyone else who is having this issue.

Has there been in the recent update where chrome just doesn't care for the autocomplete to be set to off or a random string like nope?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1 class="text-center mb-3">Contact Me</h1>
  Broken Version
  <form action="#">
    <div class="row mb-1">
      <div class="col">
        <label class="form-label">First Name</label>
        <input type="text" name="firstName" class="form-control" placeholder="First name" aria-label="First name" required autocomplete="nope">
      </div>
      <div class="col">
        <label class="form-label">Last Name</label>
        <input type="text" name="lastName" class="form-control" placeholder="Last name" aria-label="Last name" required autocomplete="nope">
      </div>
    </div>
    <div class="row mb-1">
      <div class="col">
        <label class="form-label">Email</label>
        <input type="email" name="email" class="form-control" placeholder="Email" aria-label="Email" required autocomplete="nope">
      </div>
      <div class="col">
        <label class="form-label">Phone (optional)</label>
        <input type="text" name="phone" class="form-control" placeholder="Phone" aria-label="Phone" autocomplete="nope">
      </div>
    </div>
    <div class="row mb-1">
      <div class="col">
        <label class="form-label">Subject</label>
        <input type="text" name="subject" class="form-control" placeholder="Subject" aria-label="Subject" required autocomplete="nope">
      </div>
    </div>
    <div class="row mb-1">
      <div class="col">
        <label class="form-label">Message</label>
        <textarea type="text" name="message" class="form-control" placeholder="Message" aria-label="Message" required></textarea>
      </div>
    </div>
    <button type="submit" class="btn btn-primary mt-2">Submit</button>
  </form>


  <br/>
  <br/>
  <br/> Working Version
  <form action="#">
    <div class="row mb-1">
      <div class="col">
        <label class="form-label">First Name</label>
        <input type="text" name="firstName" class="form-control" placeholder="First name" aria-label="First name" required autocomplete="nope">
      </div>
      <div class="col">
        <label class="form-label">Last Name</label>
        <input type="text" name="lastName" class="form-control" placeholder="Last name" aria-label="Last name" required autocomplete="nope">
      </div>
    </div>
    <div class="row mb-1">
      <div class="col">
        <label class="form-label">Email</label>
        <input type="email" name="email" class="form-control" placeholder="Email" aria-label="Email" required>
      </div>
      <div class="col">
        <label class="form-label">Phone (optional)</label>
        <input type="text" name="phone" class="form-control" placeholder="Phone" aria-label="Phone">
      </div>
    </div>
    <div class="row mb-1">
      <div class="col">
        <label class="form-label">Subject</label>
        <input type="text" name="subject" class="form-control" placeholder="Subject" aria-label="Subject" required>
      </div>
    </div>
    <div class="row mb-1">
      <div class="col">
        <label class="form-label">Message</label>
        <textarea type="text" name="message" class="form-control" placeholder="Message" aria-label="Message" required></textarea>
      </div>
    </div>
    <button type="submit" class="btn btn-primary mt-2">Submit</button>
  </form>


  <br/>
  <br/>
  <br/> Form with autocomplete="off" broken Version
  <form action="#" autocomplete="off">
    <div class="row mb-1">
      <div class="col">
        <label class="form-label">First Name</label>
        <input type="text" name="firstName" class="form-control" placeholder="First name" aria-label="First name" required>
      </div>
      <div class="col">
        <label class="form-label">Last Name</label>
        <input type="text" name="lastName" class="form-control" placeholder="Last name" aria-label="Last name" required>
      </div>
    </div>
    <div class="row mb-1">
      <div class="col">
        <label class="form-label">Email</label>
        <input type="email" name="email" class="form-control" placeholder="Email" aria-label="Email" required>
      </div>
      <div class="col">
        <label class="form-label">Phone (optional)</label>
        <input type="text" name="phone" class="form-control" placeholder="Phone" aria-label="Phone">
      </div>
    </div>
    <div class="row mb-1">
      <div class="col">
        <label class="form-label">Subject</label>
        <input type="text" name="subject" class="form-control" placeholder="Subject" aria-label="Subject" required>
      </div>
    </div>
    <div class="row mb-1">
      <div class="col">
        <label class="form-label">Message</label>
        <textarea type="text" name="message" class="form-control" placeholder="Message" aria-label="Message" required></textarea>
      </div>
    </div>
    <button type="submit" class="btn btn-primary mt-2">Submit</button>
  </form>
</body>

</html>
htmlgoogle-chromeautofill


Solution 1:[1]

To fix this I just used Just-validate to make my own validations. This still allows for chrome autofill to work but now it won't bypass the default min character HTML attributes.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Isiah Jones

Related Questions