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