Combine Form & Input Validation

Hi sean.hickey

You don’t need to use Get-Element. Everything is already available in the components themselves.

Below is an example of how you can use validation. I’ve added a few textboxes and a togglegroup in a new-udform.
Clicking on the toggle will show you what’s inside of $EventData anytime validation runs (like when you write something in the textbox):

New-UDApp -Content { 

    New-UDDynamic -Id "MyDynamicData" -Content {

        New-UDForm -Children {
        

            ## This data is will be in the EventData. Make sure to put in -ID for easier management
            New-UDTextbox -Label "Name" -Id "MyName"
            New-UDTextbox -Label "Role" -Id "MyRole"
            New-UDTextbox -Label "Dept" -Id "MyDept"


            ## This one controls the modal, so you don't get spammed each time you type something. You can enable any of these to see what information
            ## is located in the $EventData.
            New-UDToggleButtonGroup -Content {
                New-UDToggleButton -Content {
                    New-UDIcon -Icon 'User'
                }

                New-UDToggleButton -Content {
                    New-UDIcon -Icon 'glasses'
                } -Id 'test'

            } -OnChange {
                $Session:Toggle = $EventData
                Show-UDToast -Message "You selected $EventData"
            } -Id "ToggleGroup"
            

        } -OnSubmit {

            Show-UDSnackbar -Message "Form completed" -Persist

            

        } -OnValidate {

            ## This toggles the modal, so you don't get spammed, since validation runs often
            If ($Session:Toggle) {

                Show-UDModal -Content {

                    New-UDMarkdown -markdown ("**MyName:** {0} `n **MyRole:** {1} `n **MyDepartment:** {2} `n **EventData:** {3}" -f $EventData.MyName,$EventData.MyRole, $EventData.Role, $($EventData | Out-String))

                }

            }

            ## EventData contains the IDs from your objects. You will notice that the textboxs ID's are available while the toggle is not. 
            ## To use the Toggle, we can put it in a $Session scope to be used in our validation.

            ## Here we validate the textboxes to make sure they are not empty
            If ([string]::IsNullOrWhiteSpace($EventData.MyName)) {New-UDValidationResult -ValidationError "Name Cannot be empty"}
            If ([string]::IsNullOrWhiteSpace($EventData.MyRole)) {New-UDValidationResult -ValidationError "Role Cannot be empty"}
            If ([string]::IsNullOrWhiteSpace($EventData.MyDept)) {New-UDValidationResult -ValidationError "Dept Cannot be empty"}

            # If New-UDvalidationResult -valid is not active, then your submit button is disabled. So your logic always has to finish validation on this one.
            # You can try putting a # in front of the New-UDvalidation -Valid below. You can now not complete the form.
            New-UDValidationResult -Valid

        }
    }
}

You can also check this question where an New-UDstepper is used: