Howto do form validation?

PowerShell Universal
1 
Product: PowerShell Universal
Version: 3.9.7

I have a quite large form with some textboxes. I would like to validate each textbox, one by one with i.e. regex. What is the prefered way to do this. If I use the -OnValidate on the form the error message show up at the bottom which is quite uggly. The way I prefer it is by doing -OnValidate on each textbox but how do i combine this with -OnValidate on the form so the users are unable to submit the form if one or more fields are not valid.

Below is some example code. The code work as i wan´t i but I have to do the validation twice. Is there i better way? Like a variable that tells if the form is validated without any errors?

$Pages += New-UDPage -Name ‘Test validation’ -Content {
New-UDRow -Columns {
New-UDGrid -LargeSize 4 -Children {}
New-UDGrid -LargeSize 2 -Children {
New-UDForm -Id “form1” -Content {
New-UDTextbox -Id “Name” -Label “Name” -FullWidth -OnValidate {
If ($EventData -cmatch “[1]{4,50}$”)
{

                    New-UDFormValidationResult -Valid
                }
                Else
                {
                    New-UDFormValidationResult -ValidationError 'Invalid text'
                }
                
            }

        } -OnSubmit {
            Show-UDToast $EventData.Name -Position center
        } -ButtonVariant contained  -OnValidate {
            If ($EventData.Name -cmatch "^[a-z]{4,50}$")
            {
                New-UDFormValidationResult -Valid
            }
            Else
            {
                New-UDFormValidationResult -ValidationError ''
            }
        }
    }
}

}

  1. a-z ↩︎

2

For what it’s worth, if I have multiple text boxes or a larger form, I’ve found -OnValidate to not meet my needs due to it throwing errors before users even attempt to fill in certain fields. What I have done instead is to build all my checks into the -OnSubmit block and only proceed once all my checks are satisfied. This does mean having to handle all fields with user-facing notifications (e.g. Show-UDToast), but it has been the compromise between easiness and flexibility. For example:

New-UDPage -Name 'Example Form' -Content {
    New-UDForm -Content {
        #Removed for brevity
    } -OnSubmit {
        If ([string]::IsNullOrEmpty($EventData.GivenName)) {
            Show-UDToast "GivenName is a required field. Enter a GivenName and resubmit form." -Title 'Error' -Position center -MessageColor 'red'
        } ElseIf ([string]::IsNullOrEmpty($EventData.Surname)) {
            Show-UDToast "Surname is a required field. Enter a Surname and resubmit form." -Title 'Error' -Position center -MessageColor 'red'
        } Elseif ([string]::IsNullOrEmpty($EventData.UserID)) {
            Show-UDToast "UserID is a required field. Enter a UserID and resubmit form." -Title 'Error' -Position center -MessageColor 'red'
        } Elseif ($EventData.UserID -notmatch '^\d{5,6}$') {
            Show-UDToast "UserID must be between 5 and 6-digits, and only contain numbers." -Title 'Error' -Position center -MessageColor 'red'
        } Else {
            # All checks pass, proceed with execution
        }
    }
}

Again, it’s not as clean/easy as -OnValidate, but since you have to build all the checks/logic for validation anyway, wrapping it within the -OnSubmit has been my go to process. The main downside is the Submit button is always available, but if you have your checks in place, it’s no more risk than the -OnValidate.

2 Likes