41

When visiting the "reset password" route of my single-page app and looking at the Chrome browser console, I am greeted with the follwing warning:

[DOM] Password forms should have (optionally hidden) username fields for accessibility: (More info: goo.gl/9p2vKq)

Helpfully, the html of the form in question is also printed to the console in the next line, and quite clearly contains a hidden username field:

<form data-ember-action data-ember-action-436=​"436">​
  <div class=​"form-group">
    <label for=​"newpasswordone">​Password​</label>​
    <input type=​"password" autocomplete=​"new-password" placeholder=​"Enter your new password" id=​"ember437" class=​"form-control ember-text-field ember-view" data-op-id=​"0">​
    <label for=​"newpasswordtwo">​Password (again)​</label>
    ​<input type=​"password" autocomplete=​"new-password" placeholder=​"Re-enter your new password" id=​"ember438" class=​"form-control ember-text-field ember-view" data-op-id=​"1">​
    <input type=​"hidden" name=​"username" autocomplete=​"username" value=​"a_b">
  ​</div>​
  <button disabled type=​"submit" class=​"btn btn-default">​Reset password​</button>​​
</form>​

I tried some minor variations -- unhiding the username field, marking it readonly, moving it outside the div -- without affecting the warning. How does Chrome expect to be served the username?

Problem occurs with Chrome 63 and 64.

Yves M.
  • 29,855
  • 23
  • 108
  • 144
arne.b
  • 4,212
  • 2
  • 25
  • 44
  • Similar but for angular: https://stackoverflow.com/questions/48536209/google-chrome-warning-password-forms-should-have-optionally-hidden-username-f?rq=1 – rmcsharry Jun 29 '19 at 06:00

7 Answers7

54

I had the same problem. After some digging, I found that it needs to be an input element with the type text. By "optionally hidden" they mean that you may hide it with CSS.

If you just add an input with the name email or username chrome gives you another warning saying that input elements should have autocomplete attributes. So this is what I came up with to fix these errors:

<input
  type="text"
  name="email"
  value="..."
  autocomplete="username email"
  style="display: none;"
>

You will need to manually render the actual username or email into the elements value attribute.

Also, keep in mind that inline styles are not a very good practice.

Yves M.
  • 29,855
  • 23
  • 108
  • 144
Jonas
  • 829
  • 7
  • 18
  • 3
    Thanks. Sounds plausible enough, but unfortunately, changing the input type to text (or even "username") did not change the warning message (except for the reproduced html node content, of course), even when I do not hide the field. :-( – arne.b Feb 19 '18 at 09:14
  • 1
    I do have such field in my form and even it is not hidden at the moment and still getting this error :/ https://i.postimg.cc/7Z81vcgD/Screenshot-at-Apr-26-14-41-29.png – Luckylooke Apr 26 '19 at 12:45
  • I'm not familiar with VueJS. I could imagine that the analyzer runs before the code is executed that renders the form field. Have you tried compiling the project and see if the warning is still there? – Jonas Apr 28 '19 at 16:23
  • 1
    Using an input with type="text" and having it visually hidden appears to work (Chrome 91) insofar as the inbuilt password manager prompts to save the password along with the correct username, but note that the warning still appears in the console. It seems that Chrome shows the warning as general advice for any password reset form regardless of whether it actually contains a username field. – Ade Jul 13 '21 at 11:40
  • Thx! Just what I needed. – Nikola Schou Aug 07 '21 at 05:49
  • My form is a password reset form. It doesn't have and doesn't need any "username" input. Reset request is identified by unique token. Littering form's HTML with useless inputs "for accessibility" (huh?) seems nonsensical. Or am I missing something important here? – silverdr Dec 29 '21 at 13:00
  • @silverdr Chrome and other browsers offer to create complex passwords on forms and without the username it can't save it to its password list. so adding the hidden username field gives the browser context for what to input on the login page – Sarfaraaz Mar 29 '22 at 02:24
  • @Sarfaraaz - thank you, that seems to make some sense but if I understand it correctly then I'd need not only to provide a hidden input but also to pre-fill it with correct username. As I mentioned I don't currently have username available. Should be able to get it though. – silverdr Mar 30 '22 at 09:26
21

Use the hidden attribute instead of type="hidden"

<input hidden type="text" autocomplete="username" value="{{...}}">
Yann Dìnendal
  • 1,422
  • 2
  • 17
  • 27
6

I had this same situation. Everything seemed be ok but I still got this verbose.

On my case helped me a relocate this userName input from end of form to begin of that.

It was my code before my changes:

<form id="changePass">
    <div class='modal-dialog'>
       <input type="password" class="form-control" id = "changePasswordOldPassword" autocomplete="current-password"/>
       <input type="password" class="form-control" id = "changePasswordNewPassword" autocomplete="new-password"/>
       <input type="password" class="form-control" id = "changePasswordNewPassword2" autocomplete="new-password"/>

       <div class="modal-footer">
          <button type="button" id="change-password-ok-button">Ok</button>
          <button type ="button" data-dismiss="modal">Close</button>
       </div>
   </div>
   <input id="userName" name="username" autocomplete="username" value="">
</form>

And this is current code:

<form id="changePass">
   <input id="userName" name="username" autocomplete="username" value="">
   <div class='modal-dialog'>
       <input type="password" class="form-control" id = "changePasswordOldPassword" autocomplete="current-password"/>
       <input type="password" class="form-control" id = "changePasswordNewPassword" autocomplete="new-password"/>
       <input type="password" class="form-control" id = "changePasswordNewPassword2" autocomplete="new-password"/>

       <div class="modal-footer">
          <button type="button" id="change-password-ok-button">Ok</button>
          <button type ="button" data-dismiss="modal">Close</button>
       </div>
   </div>
</form>
Presto
  • 888
  • 12
  • 30
  • 7
    Moving the hidden field to the top of the form removed the warning for me. – evolross Feb 18 '20 at 02:38
  • THANKS evolross, adding the username field after password has no meaning, username to be before pwd field – Dee May 25 '22 at 15:04
1

you must put the input tag inside another tag for example:

  <form action="">
<div>
  <input type="text" autocomplete="username">
</div>
<div>
  <input type="password" autocomplete="password">
</div>
<div>
  <input type="password" autocomplete="password">
</div>

I had this same situation in VueJs when i use rendering conditional v-if v-else and i try put input tag inside new tag and it's work for me

Faza Aulia Rosyadan
  • 11
  • 1
  • Worked like a charm, just wrap it in a
    You might encounter another error after mentioning inputs should have an autocomplete function - just add autoComplete="off" or "on" if that's what you prefer to your input
     – Nick Sherman Aug 04 '20 at 15:37
1

Though I know that this question is quite old but thought maybe it may be useful for someone .I also faced the same issue with my React app update user password and this worked for me just above the password fields without label.Excuse me for writing the React way .

<input hidden type='text' name='email' autoComplete='email' />

Basic usage :-

<form>
 <input hidden type='text' name='email' autoComplete='email' />
 <label htmlFor="oldPass">Enter your current password</label>
 <input id="oldPass" type="password" />
 <label htmlFor="newPass">Enter your new password</label>
 <input id="newPass" type="password" />
</form>
KUSHAD
  • 127
  • 1
  • 2
  • 8
0

After reading Jonas comment I rebuilt the project and the warning went away

Federica Oltolina
  • 21
  • 5
0

I had the same warning showing in the console and this is how I fixed it:

<input hidden autocomplete="username" name="username" type="text" value="{{..}}"/>
<input hidden autocomplete="email" name="email" type="text" value="{{..}}"/>
Yaman Abd
  • 116
  • 1
  • 4