Liviu
Posts: 1026
Joined: Tue Jul 13, 2021 11:29 am
Contact:  Website

Validate user input and display specific icon/error message

Wed Oct 13, 2021 2:42 pm

Hello,

Because we had many requests on how to validate multiple user input and also to display an error message about which field is invalid, in this tutorial we will create a sample project. The result looks like this:
Animation.gif
Animation.gif (229.12KiB)Viewed 380067 times

For this tutorial we are using BlackSurface Theme and we will validate 2 input values from users using custom actions (PowerShell scripts):

  • Name: we validate that this field is not empty
  • Email: we validate if is a valid email, like example at example dot com
To achieve this, here is what we need to do:

1. In the “Properties” page add the following properties:

  • NAME_PROP
  • EMAIL_PROP
    - which stores the user inputs from the EditBox, you will add that later.
  • NAME_VALIDATE
  • EMAIL_VALIDATE
    - there we store the result from the script validation.
properties.png
properties.png (8.85KiB)Viewed 381253 times

2. From the “Custom Action” page, add the “PowerShellScriptInline” custom action without sequence (we will trigger that in the UI). The script looks like:

Code: Select all

<#
.NOTES
  "pwsh.exe" is run if required version is greater or equal to 6, otherwise
  "powershell.exe" is invoked by default
#>

#Requires -version 3
Param()

$propValue1 = AI_GetMsiProperty EMAIL_PROP

$propValue2 = AI_GetMsiProperty NAME_PROP

$EmailRegex = '^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$'

if ($propValue1 -notmatch $EmailRegex){
   AI_SetMsiProperty EMAIL_VALIDATE "false"
}
else{
   AI_SetMsiProperty EMAIL_VALIDATE "true"
}

if([string]::IsNullOrWhiteSpace($propValue2)){
   AI_SetMsiProperty NAME_VALIDATE "false"
}
else{
   AI_SetMsiProperty NAME_VALIDATE "true"
}
This script checks if the input of the name/email TextBox is empty/valid and will set the corresponding value into the property.

3. From the “Dialogs” page, add a new dialog, I named it “ValidateInput”. You can customize it as you wish.
For this tutorial add 2 Text controls and 2 EditBox controls:
Dialog.png
Dialog.png (47.78KiB)Viewed 381253 times

  • Select the EditBox of the Name input and change the “Property Name” to “NAME_PROP” from the Properties - right panel.

  • Select the EditBox of the Email input and change the “Property Name” to “EMAIL_PROP” from the Properties - right panel.
    NameProp.png
    NameProp.png (50.98KiB)Viewed 381253 times
4. From the “Themes” page → “Text Styles” create two new text style. We will use the styles to display which TextBox has valid or invalid input. My new text styles look like this:

  • Identifier: GoodInput
    Property name: GoodInput
    Font & color: Verdana, 8, Bold, Lime
    TextStyle1.png
    TextStyle1.png (31.31KiB)Viewed 381253 times
  • Identifier: WrongInput
    Property name: WrongInput
    Font & color: Verdana, 8, Bold, Red
    TextStyle.png
    TextStyle.png (28.59KiB)Viewed 381253 times
5. Now back to the “ValidateInput” dialog, add 2 TextBox like this:

  • Empty name!
  • Invalid email!

    Change from the “Properties” (right panel) the “Visibile Attributes” to “False” (in this way the text is not displayed when loading the dialog for the first time) and choose your Text Style for these 2 TextBox.

    a) Select the “Empty name!” text and from the “Control Conditions” tab add the following conditions:

    • Condition: NAME_VALIDATE = “true”
      Action: Hide
    • Condition: NAME_VALIDATE = “false”
      Action: Show
    When the field is empty our script will change the “NAME_VALIDATE” property value to “false”. In this case we need to show this message and hide it otherwise.
    textCond.png
    textCond.png (30.43KiB)Viewed 381253 times

    b) Select the “Invalid email!” text and from the “Control Conditions” tab add the following conditions:

    • Condition: EMAIL_VALIDATE = “false”
      Action: Show
    • Condition: EMAIL_VALIDATE = “true”
      Action: Hide
6. We can also add 2 more TextBox to display when an input is valid. Change the Text Style of these TextBox controls to our "GoodInput Style" we created earlier. Also set the “Visibile Attributes” to “False”.
  • GoodInput.png
    GoodInput.png (19.38KiB)Viewed 381253 times

    a) Set the control condition of the "good!" TextBox of the Name input to:

    • Condition: NAME_VALIDATE = “false”
      Action: Hide
    • Condition: NAME_VALIDATE = “true”
      Action: Show
    b) Set the control condition of the "good!" TextBox of the Email input to:

    • Condition: EMAIL_VALIDATE = “false”
      Action: Hide
    • Condition: EMAIL_VALIDATE = “true”
      Action: Show
7. I created 2 small icons, you can find them attached in the project, but feel free to use your own icons/images. You can also use GIFs to be more interactive.

I added these icons using “Image” control for every EditBox - one EditBox has a “Wrong” icon and a “Check” icon. In my project these icons have the same size and I added them one on top of the other like this:
Animation2.gif
Animation2.gif (867.09KiB)Viewed 380064 times
On these icons set the Control Conditions like on the TextBox controls. You can select the icon hidden under the one displayed in the front from the right panel List.

For these icons (all 4) set from the “Properties” (right panel) the “Visibile Attributes” to “False”.

8. Set the control conditions for these icons.

Select the “Check” icon for the Name EditBox and add the following control conditions:

  • Condition: NAME_VALIDATE = “false”
    Action: Hide
  • Condition: NAME_VALIDATE = “true”
    Action: Show

Repeat the above steps for the other icons (3 more: Wrong icon for first EditBox, Wrong icon and Check Icon for the second EditBox). If you get stuck have a look on my attached project, or just copy the control conditions of the "good!" TextBox we added earlier.

9. The last step is to trigger our script on the “Next” button. Select it and add the following conditions on the “Published Events” tab:
NextConditions.png
NextConditions.png (19.52KiB)Viewed 381253 times

And that's it. Now we know which input is invalid and also notify the user about that.

You can customize in many ways this implementation. You can add GIFs for a better looking instead of simple icons. You can also create your own Text animation as a GIF and then add it instead of the TextBox controls.

Hope you find this useful! The sample project is attached to this thread, so if you are interested to take a look directly at my project, you are more than welcome to download the project file.

Best regards,
Liviu
Attachments
Demo user input.zip
(11.8KiB)Downloaded 2098 times
________________________________________
Liviu Sandu - Advanced Installer Team
Follow us: Twitter - Facebook - YouTube

Return to “Sample Projects”