0

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>
Isiah Jones
  • 94
  • 1
  • 12
  • Autocomplete `tags` or `attributes`? Those are 2 different things. What is `nope`? ... that is not an expected value. See [this information](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete), which might be helpful for whatever you're trying to accomplish. – Paul T. Mar 11 '22 at 03:27
  • @PaulT. https://stackoverflow.com/a/34998771/9694636 I found it here. – Isiah Jones Mar 11 '22 at 03:29
  • Ok, that seems like a hack, but it's still not clear what you're trying to do. Have no autocomplete fields at all, or what? – Paul T. Mar 11 '22 at 03:49
  • @PaulT. In my example, I have the autocomplete attribute used 5 times and it does not work. If I remove 3 of them the first two inputs field will not allow the chrome autofill. I have added a working version and broken version exmaples. – Isiah Jones Mar 11 '22 at 04:13
  • Ok, but that still doesn't seem to answer what I asked previously: are you trying to have _some_ autocomplete fields, or _no autocomplete fields_ at all? Although the example has 5 `autocomplete` attributes set that way (to `nope`) does not explain the desired goal. You can specify `autocomplete="off"` at the form tag, without having to specify the same attribute with each individual field within the form. See [this info too](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-autocomplete) – Paul T. Mar 11 '22 at 04:23
  • @PaulT. I have added that to the code example also. I have tried that also it that does not seem to prevent the autofill also. Doing some research a lot of people are having that same issue. – Isiah Jones Mar 11 '22 at 12:57

1 Answers1

0

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.

Isiah Jones
  • 94
  • 1
  • 12