How to create a loop to check text field status?

[kublaiboy]

Hi all,

I’m trying to create a simple registration form(first name, last name, password, etc.). For password, I want to create a PW requirements check list. As a user typing in a PW, the text field will check if it has met the requirements(numbers, letters, special characters,etc.). The problem of using Text Changed on the text field is that it only check once, usually the first character, then it will stop. I would like it to keep checking the characters the user has entered and add/remove a green check mark to the requirements below. If the character entered meets one of the requirements, it will show a green checker. If user delete the last character that meets one of the requirements, the requirement green checker will be removed. It also tracks the total number of the characters. How can I make it work? Thanks!

[kublaiboy]

I think the problem I have is that I want "if text on focused widget contains one of the 10 digits or 26 letters. But there’s no way I can set this up in my condition dialogue box. Every time I set “Contains”, the next preset box no longer has “one of” options. This is frustrating…

[lshillman]

What I usually do for this kind of thing is create another widget whose job it is to check to see that all the requirements have been fulfilled, and trigger that widget every time text changes on one of the form fields. Usually I’m enabling a “submit” button when all fields are completed correctly, or disabling the button when they aren’t. So I pick an action on the submit button that won’t accidentally fire (my default is ‘rotated’ because I almost never visually rotate things), put all the validation logic there, and fire that action as needed.

A simple registration form might have three text fields (username, password, confirmPassword) and a submitButton. So, using my method, I’d add a “rotated” event to the submit button and have this logic in it:

If text on username is not ""
AND length of text on password is greater than 7
AND text on confirmPassword is equal to text on password,
Enable this

Else
Disable this

And then on the “text changed” events of all three text fields,
fire rotated on SubmitBtn

Hope this helps!

[lshillman]

Oops, I didn’t see the second part of your question. Yeah, it’s weird that “contains” doesn’t give you the “one of” options; I assume it’s because that would tend to make prototypes really slow if it was checking a large block of text. Painful as it is, the only thing I can think of to validate, e.g., capital letters A-Z would be to create 26 cases like

If text on this contains "A"
OR text on this contains "B"
OR text on this contains "C"
...
etc.

Maybe others have a more elegant solution in mind.

[huban]

You can add the last character typed into the input field to a repeater and then use the repeater to count the number of each type of character in the repeater. Password_Validation.rp (68.6 KB)

[kublaiboy]

WOW:+1:. Thank you! I never thought you could use repeater for this purpose. I don’t know much about repeater because it’s a brain twister for me so far

So what does your “rotate” do? This part is also confusing to me. Rotating btn_submit for what?

It’s pretty sophisticated, I only figured out how you did the total character count between 8 and 12. The rest is still a mystery to me.

[huban]

Yeah. Sorry. There’s a lot going on and if you’re new to Axure trickery then it can be a bit overwhelming.

To answer your specific question: rotating the submit button checks to see if all of the character counters are greater than 0. If they are, the button becomes enabled. If not, the button is disabled, preventing the user from moving on until they have a valid password.

Repeaters take a bit of getting used to but once you start understanding their idiosyncrasies they can become very powerful. There are tons of posts on the forums for different ways to use them but the important thing to know is that whenever a repeater’s is changed for any reason (adding/deleting/editing rows, sorting, changing pages, etc.) it wipes out everything and rebuilds from the beginning.

This is why you have to reset the counters the first time the repeater refreshes. If you don’t all the counters will increment whenever a new row is added. (Removing that step will probably make things clearer than I can explain. )

Rotating each of the counter variables checks to see if the check icon should be displayed or not. I put them all in one group so I could just rotate the group instead of rotating each one individually.

The entered count and total count are there for if the user deletes a character from the input. If the entered count is lower than the total count, it will delete the last item from the repeater.