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 (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
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 (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"
}
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 (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 (50.98KiB)Viewed 381253 times
- Identifier: GoodInput
Property name: GoodInput
Font & color: Verdana, 8, Bold, Lime- TextStyle1.png (31.31KiB)Viewed 381253 times
- Identifier: WrongInput
Property name: WrongInput
Font & color: Verdana, 8, Bold, Red- TextStyle.png (28.59KiB)Viewed 381253 times
- 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
- 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
- Condition: NAME_VALIDATE = “true”
- 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
- Condition: EMAIL_VALIDATE = “false”
Action: Hide - Condition: EMAIL_VALIDATE = “true”
Action: Show
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 (867.09KiB)Viewed 380064 times
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 (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