Input elements should have autocomplete attributes
Solution 1
Turning off Autocomplete
You have the below options for working with errors of the below format Input elements should have autocomplete attributes thrown by the console by modifying:
<input type="password" name="password">
-
Set the
autocomplete
attribute tooff
at the<form>
or<input>
which:- Enforces browser to NOT store any data
- Disables caching form data in the session history
<input type="password" name="password" autocomplete="off">
-
Another way to prevent autofilling by the browser is:
The below suggestions are browser specific
<input type="password" name="password" autocomplete="new-password"> <!-- For Mozilla-->
<!-- or -->
<input type="password" name="password" autocomplete="current-password"> <!-- For Chrome-->
Solution 2
From Chromium Projects' Design Documents:
Autocomplete attributes help password managers to infer the purpose of a field in a form, saving them from accidentally saving or autofilling the wrong data.
You can use the autoComplete
attribute on an HTML element that needs to be managed by a password manager for automatically filling its value. The value of autoComplete
attribute depends on the field about which you want to convey more information to the password manager. Consider the following examples:
- Current password field -
autoComplete="current-password"
- New password field -
autoComplete="new-password"
- Credit card field -
autoComplete="cc-number"
Solution 3
TypeScript 3.9 caused me to use autoComplete -- capital "C"
Solution 4
Its in chrome.. It is to ensure that browsers' and extensions' password management functionality can understand your site's sign-up, sign-in and change-password forms by enriching your HTML with a dash of metadata.
this might help you https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands
Comments
-
vinayak shahdeo almost 2 years
I am getting this message in the console I can't understand it. Please look into it
<!DOCTYPE html> <html> <head> <title>registration page</title> <script src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('form').submit(function(event){ "use strict"; var valid = true, message = ''; $('.error').remove(); $('form input').each(function() { var $this = $(this); if(!$this.val()) { message=''; var inputName = $this.attr('name'); valid = false; message += 'Please enter your ' + inputName + '\n'; $(this).closest('div').append('<div class="error">'+message+'</div>'); } }) if(!valid){ event.preventDefault(); }else{ $('form').serialize() } }) }) </script> </head> <body> <form> <div> <label>Name</label> <input type="text" name="name"><br> </div> <div> <label>File</label> <input type="file" name="file"><br> </div> <div> <label>password</label> <input type="password" name="password"><br> </div> <button type='submit'>Submit</button> </form> </body> </html>
The problem is despite no error I keep getting this message
[DOM] Input elements should have autocomplete attributes (suggested: "current-password"):
I have been provided with a google link in console which take me to (More info: goo.gl/9p2vKq)
-
vinayak shahdeo about 5 yearsI dont want to use auto complete. It is my-choice. Why is it compulsory?
-
vinayak shahdeo almost 4 yearsWe need it to be compatible with both browsers we cant write individual cases for each of the browser
-
vinayak shahdeo almost 4 yearsit did but the comment was for second answer
-
vinayak shahdeo about 3 yearsreact uses camel casing so thats the case why you had to use "C"