Adding input validation in Uno Platform apps

Last Updated on 2022-07-15 by James Croft

A common scenario of most user experiences is the ability to validate a user’s input. Some examples include validation of a value of a text box or selection of an option from a dropdown.

In my recent post on porting your UWP libraries to Uno Platform, I showcased my migration of the MADE.NET InputValidator control to the platform.

Now it’s time to take this control for a spin in your own Uno Platform applications!

Adding input validation support with MADE.NET

Getting going is as simple as adding a reference to the MADE.UI.Controls.Validator NuGet package to your Uno project. This will allow you to drop the InputValidator control into your XAML views.

For context, the InputValidator is a content control that presents one or many UI elements. One of these UI elements should be the input control you’ll run validation on.

Due to the variety of so many different input types, the InputValidator needs to know what the input is in order to run a collection of validators and present back error messages.

Adding the InputValidator control

Below is an example of the InputValidator in a XAML page which is able to run validation over a TextBox.

The control has 2 main properties of interest that are the Input and the Validators. These provide the value to validate and the collection of validators to validate it.

The control includes a Validated event handler that emits when validation runs on the input. It will provide detail as to whether the value is dirty or invalid.

The Input property needs to bind to the input of the UI element. In this example, we’re binding directly to the Text property of the TextBox.

In your Uno application, this will render your input control and the InputValidator‘s feedback message similar as shown below.

As the InputValidator works in this way, you can use this validation control for any and all of your input controls. Whether it’s an in-built control like the TextBox or DatePicker, or a custom control like MADE’s multi-select DropDownList.

Adding input validation with a validator collection

The Validators property requires the use of a ValidatorCollection instance from the MADE.Data.Validation NuGet package.

The ValidatorCollection is a platform-agnostic type that allows you to define these in your view-model if you follow the MVVM design pattern. Under the hood, it’s a list of IValidator types that validate your input value.

From this, you can determine the validity of your inputs using the ValidatorCollection‘s IsInvalid property.

Below is an example of the backing view-model for the example page above.

Subscribing to the Validated event, when a user types in the TextBox, the IsValid property of the view-model updates. You can follow a similar pattern to concatenate the results of multiple validator collections into a single property.

For your input validators, the MADE library comes included with the following out-of-the-box validators for you to use in your own apps. For more specific scenarios, you have the option to create your own.

AlphaValidator & AlphaNumericValidator

The AlphaValidator and AlphaNumericValidator are simple regular expression validators that validate that a value contains only A-Z, or A-Z and numeric characters.

EmailValidator

The EmailValidator does exactly what it says on the tin. Using a complex regular expression, this validator ensures an email address meets the expected criteria.

If you want to see some examples of valid email addresses, check out the test cases for this specific input validator.

RegexValidator

As the base for the previous, the RegexValidator is a generic input validator that you can provide the regular expression for. It will take this and try to find matches in the input value provided.

To create have your own custom RegexValidator, simply set the Pattern property. You can also provide your own custom FeedbackMessage which is displayed when the value is invalid.

RequiredValidator

The RequiredValidator ensures that an input value is provided. Support is currently available for the following invalid scenarios.

• A value is null
• A collection has no items
• A boolean is false
• A string is null, empty, or whitespace

BetweenValidator

A simple validator that takes an IComparable value and checks whether it is between a Min and Max value that you can define.

This is a great input validator for date range scenarios where your DatePicker defines the min value for a maximum range and vice-versa.

MinValidator & MaxValidator

Breaking the BetweenValidator down to its simplest form, the MinValidator and MaxValidator ensure that a value is above or below an IComparable value.

Add your own custom input validation

If you want to bring your own custom input validation, you can simply create your own IValidator types.

Take a look at the code for the in-built IValidator types for examples on how to do this.

Explore more with MADE.NET and Uno

Now you know how to bring input validation to your Uno applications, it’s time to get started building it in. Here’s a list of resources to help you on your app dev journey with Uno.

• Getting started with Uno Platform
• Download the InputValidator NuGet package
• A lap around the MVVM Toolkit from the Windows Community Toolkit
• Porting your UWP libraries to Uno Platform

Got any questions? Drop them in the comments below!