Passwords

Do

  • When asking a user to create a password you must keep them secure. To do this you must set constraints, e.g. set a minimum character length. These constraints must be explained to users up front in hint text.
  • Password hint text (basic and complex) should sit above a form field.
  • Passwords must be hidden by default, with the option for users to see their password if they want. Use a show/hide password link under the password input aligned to the right.
  • Ensure the 'show password' text can be read correctly by screen readers by using aria-controls= to link the show password link to the password input. Use the title tag to described the link, e.g. title="show password"
  • For complex hints which state validation requirements up front e.g. 'Password musts' come up with a name for each validator, e.g. 'uppercase', 'numerical'. It shouldn't have any spaces in it.
  • On the list elements set the data-validator attribute to the name of the validator, e.g. data-validator="uppercase". This is the list item that will appear "checked" when the validator's condition is met.
  • On the input field, add a field called data-validate-validator name and set its value to a regular expression that represents whether the validator's condition is met, e.g. data-validate-uppercase="[A-Z]".
  • When a password is being set, include a second 'confirm password' input.

Guidance

  • See form templates for form patterns to follow around passwords.

Example

Enter a password

Password must:

  • have at least 1 uppercase character
  • have at least 1 numerical character
  • be 8 or more characters long

Show password

Code

<form class="needs-validation was-validated" novalidate> <fieldset> <legend>Enter a password</legend> <div class="alert alert-info"> <h4 class="alert-heading">Password must:</h4> <ul class="list-unstyled" id="validate-hint"> <li data-validator="uppercase">have at least 1 uppercase character</li> <li data-validator="numerical">have at least 1 numerical character</li> <li data-validator="numerical">be 8 or more characters long</li> </ul> </div> <label for="password">Password</label> <input id="password" name="password" type="password" aria-describedby="validate-hint" data-validate-uppercase="[A-Z]" data-validate-numerical="\d" data-validation-length="min8" data-validation-element="#validate-hint"> </div> </fieldset> </form>