Validation Behavior | Xamarin.Forms | Xamarin Community Toolkit
Hi folks, I’m glad you are reading this post. Today I want to speak about Xamarin.Forms Validators which are delivered withing Xamarin.CommunityToolkit.
First of all let’s answer the question: where should validation be executed? Server-side or Client-side?
Answer: Ideally both sides. You always should validate data on the Server-side, but Client-side validation should NOT be neglected!
If you know in advance that the data is invalid, you needn’t have to spend traffic (time & money) for “bombing” your Server with this data :) Just ask a user to input valid data before making any requests.
The second question, what’s better?
1) Validate all fields together when the “Complete” button clicked.
2) Validate field as soon as a user ends input.
Answer: I think the second approach is more convenient and provides a better user experience (But of course it depends on your app’s requirements).
If you can validate some fields on the spot, then Just Do It :) No need to wait until a user fills all other fields and click the “complete” button.
Also, if a field is highlighted as “invalid” and the user amends the value to be valid, the fields should become “normal” as soon as the user ends input.
From my perspective, it’s not cool when the user must click the “complete” button again to see that the input is valid indeed.
As long as you agree with the above points, we dive into awesome XamarinCommunityToolkit Validation Behaviors!
Let’s create a new Xamarin.Forms project and add very simple/basic UI that will be used for playing with validators.
Simple Sign Up form (Email input, Password input, and Repeat Password input).
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XCTValidatorDemo.MainPage"><ContentPage.Resources>
<Style TargetType="Entry">
<Setter Property="FontSize" Value="20" />
<Setter Property="HorizontalOptions" Value="FillAndExpand" />
<Setter Property="TextColor" Value="Purple" />
</Style>
</ContentPage.Resources><StackLayout VerticalOptions="CenterAndExpand"
Spacing="10"
Padding="15, 0"><Label Text="VALIDATORS DEMO"
HorizontalOptions="CenterAndExpand"
FontSize="30"
Margin="0, 0, 0, 50"/><Entry Placeholder="Email"
Keyboard="Email"/><Entry Placeholder="Password"/><Entry Placeholder="Repeat Password"/><Button Text="Sign Up"
TextColor="White"
BackgroundColor="Purple" /></StackLayout></ContentPage>
And the result:
So, it’s high time to install Xamarin.CommunityToolkit NuGet package to all Xamarin.Forms projects (including platform-specific projects such as iOS, Android, etc.)
https://www.nuget.org/packages/Xamarin.CommunityToolkit/
Then let’s add the reference to this library in the Xaml page we created in the previous step. Add next line to the root element of the Xaml page (in our example it’s ContentPage)
xmlns:xct="http://xamarin.com/schemas/2020/toolkit"Good news: no additional setup required :) Let’s validate our fields!
First of all, let’s define the “invalid” entry Style. In our example, it will change its TextColor from Purple to Red, but, of course, it can be whatever you want!
<Style x:Key=”InvalidStyle” TargetType=”Entry”>
<Setter Property=”TextColor” Value=”Red” />
</Style>The first entry requires a valid email. Let’s make it happen :)
<Entry Placeholder=”Email”
Keyboard=”Email”>
<Entry.Behaviors>
<xct:EmailValidationBehavior
DecorationFlags="Trim"
InvalidStyle=”{StaticResource InvalidStyle}” />
</Entry.Behaviors>
</Entry>Pay attention at DecorationFlags I set. DecorationFlags=”Trim” means that the input string will be trimmed before validation (leading and trailing whitespaces will be removed). We don’t want to force users to remove spaces if they accidentally appear in the copy-pasted string. Just ignore these spaces instead of highlight the field as “invalid”.
The second entry is Password. I want to make this field conforming several rules:
1) Minimum length is 6 symbols.
2) At least one digit is required.
3) At least one uppercase character required.
4) At least one lowercase character required.
5) At least one symbol required.
6) Spaces are FORBIDDEN.
For achieving this we will use MultiValidationBehavior that can aggregate several validators.
<Entry Placeholder=”Password”>
<Entry.Behaviors>
<xct:MultiValidationBehavior
InvalidStyle="{StaticResource InvalidStyle}">
<xct:TextValidationBehavior
MinimumLength=”6" />
<xct:CharactersValidationBehavior
CharacterType=”Digit”
MinimumCharacterCount=”1" />
<xct:CharactersValidationBehavior
CharacterType=”LowercaseLetter”
MinimumCharacterCount=”1" />
<xct:CharactersValidationBehavior
CharacterType=”UppercaseLetter”
MinimumCharacterCount=”1" />
<xct:CharactersValidationBehavior
CharacterType=”NonAlphanumericSymbol”
MinimumCharacterCount=”1" />
<xct:CharactersValidationBehavior
CharacterType=”Whitespace”
MaximumCharacterCount=”0" />
</xct:MultiValidationBehavior>
</Entry.Behaviors>
</Entry>Here we use TextValidationBehavior that can validate string length (minimum and maximum) and check if the string matches some Regex that can be specified.
Also, we use CharactersValidationBehavior to check which kind of characters are inside the value string. (MinimumCharacterCount = 1 means at least one character of the provided type must be inside the string. MaximumCharacterCount = 0 means no one character of specified type should be inside the string).
And the third field is Repeat Password. Its value must be the same as the Password entry’s value.
<Entry x:Name="PasswordEntry" Placeholder="Password" /><Entry Placeholder=”Repeat Password”>
<Entry.Behaviors>
<xct:RequiredStringValidationBehavior
RequiredString=”{Binding Text,
Source={x:Reference PasswordEntry}}” />
</Entry.Behaviors>
</Entry>
RequiredStringValidationBehavior validates that the input string equals RequiredString.
And what we have!
Demo project: https://github.com/AndreiMisiukevich/XCTValidatorDemo
Of course you always can get actual validator’s state by calling IsValid property (You can bind to it in ViewModel. It works in OneWayToSource mode). It will allow you to hide/show additional elements depending ot the validator’s state (as shown on the image below).
Keep in mind that validators are quite flexible and you may setup WHEN validation should happen.
There is the Flags property that determines when the validation should be performed (Default value is: ValidateOnUnfocusing | ForceMakeValidWhenFocused). That’s why in sample app TextColor becomes Purple when an entry is focued enven if the value is invalid. (I think it’s good UX, but feel free to setup this behavior as you prefer).
And, I think, the final thing that I want to share in this article (I hope you are still here and reading it! xD). It’s related to MultiValidationBehavior.
Very ofthen it’s important to know which nested validators are valid and which are not.
Example: Some string must have at least 3 characters but not more than 10.
Of course, we can use single TextValidationBehavior:
But how to determine what exactly is wrong if IsValid = False?
That’s why here is better to use one validator per rule.
There is an attached property Error in MultiValidationBehavior. And there are bindable property Errors.
The attached property represents the key/identifier of the particular validator inside the multi validator.
If during the validation a validator fails, its “key” will be stored inside the Errors list of MultiValidationBehavior. In this way, the user can identify which validators were successful and which are not.
More examples you can find on the XamarinCommunityToolkit GitHub page
https://github.com/xamarin/XamarinCommunityToolkit/tree/main/samples/XCT.Sample/Pages/Behaviors
Please feel free to ask any questions :)
Try validators in your apps, share your experience with us and community.
We appreciate any feedback.
THANKS FOR READING
