Showing validation message without condition when text changed, using opacity

when we design a registration or login page, we usually have to setup if/else conditions to check text of edit box and then show or hide the message in a label. below is an example.

I wanna share an easy way with setting opacity of message label and it is also simple to copy to other page.

  1. We add a editUserName for input and a labelErrorMessage to show validation message.
  2. Setting opacity of labelErrorMessage to zero in page load to hide validation message.
  3. Adding interaction “text changed” in editUserName and adding action to set opacity of labelErrorMessage.
  4. open fx window and below function inside. like below.

function value
[[100 - Math.max(Math.min(this.text.length-3,1),0)*Math.max(Math.min(9- this.text.length,1),0)*Math.max(Math.min(this.text,1),0)*100]]

Attached the source file for try and pls let me know if you have idea to make it better.

TeanoValidationMessage.rp (55.0 KB)