Dynamic password validation on typing

Hi, I am trying to create behaviour that represents password validation on typing.
My password has the following acceptance criteria

  • At least 1 special character
  • At least 6 characters
  • At least 1 capital letter

Whenever a user clicks on the password input field all acceptance criteria are displayed below it.
When the user is typing entered value is validated and when acceptance criteria for password are met
That acceptance criteria change colour to green

I have a problem to create validation for special characters and capital letter.
I was trying to use on onTextChange property to do this but I am a bit lost at the moment

validation only.rp (73.5 KB)

Hi makrosster!

Instead of using OnTextChange events for this purpose, you can use OnKeyUp events to have the event fire at the release of every key pressed within your text field widget.

You can also simplify a few of your case’s conditions!

To make it so that the “Special character” case can fire more easily, you can create conditional logic that reads:

If text on This is not alpha-numeric

This means that the case will fire if a character is entered into the text field that is neither a letter nor a number.

The second case, which fires when the length of the value of This is greater than or equal to “6” is just right!

And finally, for the third, capitalization case, you can use the following conditional logic:

If text on This does not equal “[[This.text.toLowerCase()]]”

The function “.toLowerCase()” sets up a version of the entered text that does not contain any upper case characters. In this way, if the entered text does contain uppercase characters, it will disagree with the lower case version, and the case’s actions will be able to fire.

Please see the attached sample where these changes have been made.
validation only_edited.rp (73.1 KB)

Please note that for the text and check widgets to revert to their previous states as text is removed from the field, you will need to create another three OnKeyUp events that work in the opposite direction of these first interactions. For example, if you wanted the capital letter tip to revert to it’s previous state when a capital letter is removed, you would want to create a case that uses this conditional logic:

If text on This equals “[[This.text.toLowerCase()]]”

I hope this helps!

Thanks a lot, that very help full

This topic was automatically closed 5 days after the last reply. New replies are no longer allowed.