Password Validation (Validate, Conditional Validator Password/Text Field/Fields)


#1

Password Validation

Password validation has been a fairly often requested example. Axure can actually do this fairly easily and quite well. The trick is to treat the password validation as a series of conditions that if not met (or failed) means the password is invalid/bad. If you make it through all of these conditions without failing then the password is valid/good.

Here is what a pretty thorough password validation check will look like. I know it can look pretty intimidating at first, but if we go through it Case by Case it is actually fairly straightforward. :slight_smile:

See It Live: Password Validation
RP File: PasswordValidation.rp (56.2 KB)

1. Excluded Characters (Spaces)

Fail: if the password text contains " " or any other characters that are not allowed (often certain symbols are exempted for technical or backend reasons).

2. Length

Fail: if password length is less than 8 characters (or any length required). You can also check and fail is the password is too long here (e.g. greater than 20).

3 & 4. Upper/Lower Case Character

Fail: if password does not contain an upper and lower case character. What is great about these 2 cases, we don’t have to check for alpha characters anymore, by ensuring we have an upper and lower case character we have also by definition ensured that we have an alpha character.

5. Number Character

Fail: if the password does not contain one character [0-9].

(This is the most intimidating Condition, I almost left it out because without it, the validation is still pretty good it just means a few passwords would sneak through where the user gets everything else correct, but no number. I think most people will try to type the number before the symbol character though, you can decide if the perfect validation or simplicity of leaving this one off is more important for you.)

6. Symbol Character

Fail: if the password is alpha-numeric, this means it only contains letters and numbers and doesn’t have a symbol yet.

7. Success (Valid Password)

Success: none of our Fail conditions were met, that means we have a good password!

I think this should definitely cover any password validation needed for the prototype level. I would be surprised if there were many better password validators out there in the wild. But, let me know if I missed anything or you notice any holes in the validation.

*One final note, I choose to do this as you type your password. But you could easily check on a Button Shape OnClick or something similar.


#2

Hi, Ian.

I downloaded your file and tried to modify it. I’m struggling with the conditions for numbers and special characters. Do you have any idea why my Axure file isn’t work?

Thanks!


#3

[QUOTE=mali;72736]Hi, Ian.

I downloaded your file and tried to modify it. I’m struggling with the conditions for numbers and special characters. Do you have any idea why my Axure file isn’t work?

Thanks![/QUOTE]

Hi mali!

Ian’s example is based on successive failed conditions. That is, each time a condition fails to be met, then the next conditional “Else-If” case will fire.

On the flip side, your example is reversed in that it’s based on conditions that pass successively. When a condition is met, then the next “If” condition will get evaluated–following “Else-If” conditions will not fire.

Please check out this section of our conditional logic article:

https://www.axure.com/support/reference/conditional-logic#multiple_cases

And so a quick way forward is to toggle the “Else-If” conditions to “If” conditions so that each one gets evaluated after the previous case is met. To toggle conditions, right-click the case and select “Toggle If/Else”.

Screenshot:

“If” conditions will be evaluated regardless of whether the previous conditions were met; “Else-If” conditions get evaluated only if the preceding condition fails.

In the screenshot above, you’ll also see that I modified the Number condition to be reversed from Ian’s project. In other words, it evaluates if the text on the field contains any number. (I also modified the Upper Case condition in this inverted manner.)

Screenshot:

Hope that helps!
mk-pw-validation_EDIT.rp (104 KB)


#4

Hi Alex!

Wow! Didn’t realize it was so easy and a toggle. That seemed to fixed it. Thank you very much! You rock!

Mali


#5

I have a couple more questions. After all the conditions are met and the last dots/validation text has turned green, what can I do to get the background to change from beige to green? I thought adding “Else If True” show “pw-bckgrd-mint” would do it, but that just turned the background green all the time.

Lastly, what approach would you recommend for validating that the “Confirm password” field matches what the user created in the “Create password” field?

Hope this isn’t too much for you to cover.

Thanks in advance for your response.

Mali
mk-pw-validation2.rp (111 KB)


#6

Worked on the file some more and was able to figure out a way to show the green background color when all the conditions are met, and I was able to validate that the “Confirm password” field matches that of the “Create password” field, however I can’t figure out what conditions to add or how to go about solving for the error state not to show up until user finish typing or if they type an incorrect alpha/numeric in the filed. Got any idea?

Thanks!
mk-pw-validation3.rp (131 KB)


#7

Hello!

For the “Confirm password” text field, you could move your existing OnKeyUp cases under the OnLostFocus event instead. (Feel free to simply drag the cases from underneath the OnKeyUp event to the OnLostFocus event.) So, instead of evaluating the matching text as the user types, you can evaluate the matching text when the user navigates away from the field.


#8

Thanks, Alex! I used OnMouseMove and that seemed to work, but I’ll try OnLostFocus next.


#9

Hi Ian, thanks for your PW validation share - unfortunately I cannot get the upper/lower case validation to work. I’ve copy and pasted your conditions over from your file but no joy. everything else works fine. strange as your file works fine in preview. I’ve included a screen grab in case you spot anything.


#11

Hi nywebdiva!

Could you please send along a screenshot of your interactions or send the RP file where the capitalization is not working correctly? This should help to troubleshoot any issues that might be keeping that interaction from firing correctly.

Thanks!


#12

thank you for the above information. How does this work if you have to VERIFY the same password with the same errors and success labels?


#13

I removed the question, as it is no longer in question. Resolved. Thank you.


unlisted #14

closed #15

unpinned #16