Chrome-Warnung "[DOM] Password Formen haben soll (Optional versteckte) Felder für den Benutzernamen für Barrierefreiheit" in die Konsole sogar mit versteckten Feld Benutzername

Beim Besuch der "Passwort zurücksetzen" route von meinem single-page-app und Blick auf die Chrome-browser-Konsole, begrüsst mich mit der folgenden Warnung:

[DOM] Password Formen haben soll (Optional versteckte) Felder für den Benutzernamen für die Erreichbarkeit: (Mehr info: goo.gl/9p2vKq)

Hilfreich, den html-Code der form in Frage, auch gedruckt auf der Konsole in die nächste Zeile, und ganz klar enthält ein verstecktes Feld Benutzername:

<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>​

Ich habe versucht, einige geringfügige Abweichungen -- einblenden das Feld Benutzername ein, markieren es readonly, verschieben Sie es außerhalb der div -- ohne die Warnung.
Wie funktioniert Chrome erwarten, um bedient zu werden der Benutzername?

Problem tritt auf mit Chrome, 63 und 64.

InformationsquelleAutor arne.b | 2018-01-30
  1. 18

    Ich hatte das gleiche problem. Nach einigem Graben fand ich, dass es braucht, um ein input element mit dem Typ text. Von "Optional ausgeblendet" Sie bedeuten, dass Sie können ausblenden, es mit CSS.

    Wenn Sie fügen Sie einfach ein input mit dem Namen email oder username chrome gibt Ihnen eine Warnung sagen, dass input Elemente sollten autocomplete Attribute. Also das ist, was ich kam mit, um diese Fehler zu beheben:

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

    Müssen Sie manuell das Rendern der eigentlichen Benutzernamen oder E-Mail in die Elemente value-Attribut.

    Beachten Sie auch, dass inline-styles sind nicht eine sehr gute Praxis.

    • Danke. Klingt plausibel genug, aber leider hat das ändern des input-Typ text (oder auch "username") nicht ändern, die Warnung (mit Ausnahme des abgebildeten html-node-Inhalt, natürlich), auch wenn ich nicht ausblenden das Feld. 🙁
    • Ich habe ein solches Feld in meiner form, und es ist nicht versteckt in dem moment, und noch immer diese Fehlermeldung :/ i.postimg.cc/7Z81vcgD/Screenshot-at-Apr-26-14-41-29.png
    • Ich bin nicht vertraut mit VueJS. Ich könnte mir vorstellen, dass der analyzer ausgeführt wird, bevor der code ausgeführt wird, sodass das form-Feld. Haben Sie versucht, das Projekt kompilieren und sehen, ob die Warnung ist immer noch da?
    InformationsquelleAutor Jonas Hungershausen
  2. 0

    Hatte ich die gleiche situation.
    Alles schien ok, aber ich habe immer noch diese ausführlichen.

    In meinem Fall hat mir geholfen, ein verlagern dieser Benutzername Eingabe vom Ende des Formulars zu beginnen, dass.

    Es war mein code, bevor meine änderungen:

    <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>

    - Und dies ist der aktuelle 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>
    InformationsquelleAutor Presto
Schreibe einen Kommentar