I have two functions in my user registration form

  • One checks the password and confirmed password are the same.
  • The other checks if the password is strong enough.

I have two presentation related questions

  • What words should I use if the passwords don't match or isn't strong enough? I have a text field beside the first password which is initially empty but gets updated as each character is typed in (I can add a second text field beside the confirm password part).
  • When and in what order should the functions be called? For example if I only call the passwords match function on the confirm password section then if the user goes back and changes the first password things will get messed up. If I call the passwords match function at the first time the user types in the password then it will override the message about the password not being strong enough or the strong enough password will override the "password don't match" message.

The function that checks if the password is strong enough is real simple, just to prevent "123" and password. In the future I'd like to make an option to unmask the password and only have one field and no confirm.

  • I find progress-bar-like indicators of password strength a very nice feature. (The bar is updated with every character.) They're often color coded and red until the strength has a value of "strong" at which point they turn green, indicating it's acceptably strong. But there should be something besides the color change to indicate that it's acceptable.
    – obelia
    Commented Feb 22, 2013 at 22:37
  • @obelia my password requirments are so simple I was just planning on having "password good" "password too simple". Could you elaborate on such a design?
    – Celeritas
    Commented Feb 22, 2013 at 23:24

1 Answer 1


Keep it simple:

  • As the user types into the first textfield, have a strength indicator near by telling the user if their password is strong that updates as they type. Don't enable the confirm field until they have entered a password that meets your requirements.
  • When they tab into the second field to confirm, have a label next to it that updates as they type saying whether the passwords match.
  • If the user goes back to the first text field and makes a change, blank out the confirm textfield and make them enter the whole thing all over again.

Your end goal of eventually having an unmasked single field is a good one. I left them unmasked in the diagram below for the sake of demonstration.

The key take away is: focus your user on one task at a time, and validate once the user has completed that task and then move them to the next step in the workflow. Give real time information about their status in that step in the workflow.


download bmml source – Wireframes created with Balsamiq Mockups

  • 1
    In the Entered Password part I notice you have "Password doesn't match". When should that appear (as opposed to being blank)? For example, after the first character in the Confirm Password is typed or when focus is put to the element?
    – Celeritas
    Commented Feb 22, 2013 at 23:36
  • It could be either. One option is to just display "Password doesn't match" as soon as they focus on the textfield. Another is to have it say "Please re-enter your password" when the second textfield is enabled and then as soon as they enter a char switch to "Password doesn't match" Commented Feb 22, 2013 at 23:38
  • In regards to the second option don't you think it's kind of redundant to have "Please re-enter your password" and above the text field say "Confirm password"?
    – Celeritas
    Commented Feb 23, 2013 at 9:09
  • It could be. I would test and see if your users need it or not. Commented Feb 25, 2013 at 17:54
  • 1
    One option for the "don't match" warning would be to show nothing so long as what the user has typed so far in the second field matches the beginning of what's in the first field. In "normal use" this would prevent a premature "don't match" warning (leading to an exasperated "I know they don't match, I haven't finished typing!" reaction in many users).
    – TripeHound
    Commented Jun 5, 2019 at 9:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.