<input type="password" maxlength="20"> prevents me from logging into Vanguard

For an extended period, the author struggled to log into their Vanguard account via the web. They attempted to reset the password multiple times over the past year, but the issue persisted. Initially, they attributed the problem to a glitch, relying on the QR code scanner in the Vanguard app on their phone for login. However, they decided to investigate further and discovered that the maxlength attribute set to 20 on the reset password form was the root cause.

The author explains that Vanguard utilizes the input type=password field with a maximum length limit of 20 characters. They utilize 1Password with a heightened sense of security, generating passwords longer than 20 characters. When attempting to log in, they copied and pasted their lengthy password into the password and confirm password fields. Since the maxlength is set to 20, Chrome only inputs the first 20 characters (abcdef...rstu) of the password.

To address the issue, the author attempted to submit the password twice, once in each field. However, upon attempting to log in, they encountered an error message stating that the password was incorrect. Confused, they returned to the login page and entered the full password (abcdef...z) they used in the reset password form. Vanguard rejected the password once again, leaving the author puzzled.

The author argues that using the maxlength attribute on password fields is problematic. Validating the password length either through JavaScript or on the server-side is a more reliable approach, as it processes the exact text that the user provides, rather than the unintentionally trimmed text.