Fluent Validation: How to validate Registration Page fields in Xamarin Forms (C# - Xaml) | SubramanyamRaju Xamarin & Windows App Dev Tutorials

Introduction:

Fluent validation is a small validation library for .NET that uses a Fluent interface and lambda expressions for building validation rules for your business objects. Fluent validation is one way of setting up dedicated validator objects, that you would use when you want to treat validation logic as separate from business logic. This article describes how to do FluentValidaiton in Xamarin.Forms for Registration Page.

Requirements:

This article source code is prepared by using Visual Studio Community for Mac (7.4). And it is better to install latest visual studio updates from here.

This sample project is Xamarin.Forms PCL project and tested in Android emulator and iOS simulators.
Used FluentValidation Nuget Package version is V7.5.2.

Description:

This article can explain you below topics:

1. How to create Xamarin.Forms PCL project with Visual Studio for Mac?
2. How to create RegistrationPage and bind it to view model in Xamarin.Forms PCL project?

3. How to create Fluentvalidation rules to validate registration page in Xamarin.Forms app?

4. How to call Fluentvalidation validator class from view model?

5. How to set default view model Command for Registration submit Button?

1. How to create Xamarin.Forms PCL project with Visual studio for Mac?

First we need to create the new Xamarin.Forms project.

Launch Visual Studio for Mac.
On the File menu, select New Solution.
The New Project dialog appears. The left pane of the dialog lets you select the type of templates to display. In the left pane Multiplatform > App > Xamarin.Forms > Blank Forms App and click on Next.
Enter your App Name (Ex: FluentValidationSample). Select Target Platforms to Android & iOS and Shared Code to Portable Class Library after that click on Next button.
You can choose your project location like below and Create new project.

And project structure will be.

FluentValidationSample: It is for PCL shared code.

FluentValidationSample.Droid: It is for Android.

FluentValidationSample.iOS: It is for iOS.

2. How to create RegistrationPage and bind it to view model in Xamarin.Forms PCL project?

Now create Views folder by right click on your PCL project name FluentValidationSample => Add => New Folder and name it "Views". After that right click on Views folder => Add =>New File => Forms => Forms ContentPage Xaml and name it UserRegistration like below.

UserRegistration.xaml

Now open UserRegistration.xaml page and add below xaml code to create UI for it.

<?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="FluentValidationSample.Views.UserRegistration">  

  <ScrollView>    

        <StackLayout Padding="40,60,40,0" VerticalOptions="FillAndExpand" Spacing="70">    

            <Label Text="Fluent Validation" TextColor="Blue" HorizontalOptions="CenterAndExpand" FontSize="30"/>    

            <StackLayout Spacing="20">    

            <Entry Placeholder="User Name" Text="{Binding UserName}" HeightRequest="40" HorizontalOptions="FillAndExpand"  TextColor="Gray" BackgroundColor="White"/>    

            <Entry Placeholder="Phone Number" Text="{Binding PhoneNumber}" Keyboard="Telephone" HeightRequest="40" HorizontalOptions="FillAndExpand"  TextColor="Gray" BackgroundColor="White"/>    

            <Entry Placeholder="Email" Text="{Binding Email}" HeightRequest="40" Keyboard="Email" HorizontalOptions="FillAndExpand"  TextColor="Gray" BackgroundColor="White"/>    

            <Entry Placeholder="Password" IsPassword="true" Text="{Binding Password}" HeightRequest="40" HorizontalOptions="FillAndExpand"  TextColor="Gray" BackgroundColor="White"/>    

            <Entry Placeholder="ConfirmPassword" IsPassword="true" Text="{Binding ConfirmPassword}" HeightRequest="40" HorizontalOptions="FillAndExpand"  TextColor="Gray" BackgroundColor="White"/>    

            <Button Text="Register" HorizontalOptions="FillAndExpand" TextColor="Blue" Command="{Binding RegisterCommand}" HeightRequest="40"  BackgroundColor="White"/>    

            </StackLayout>    

        </StackLayout>    

            </ScrollView>    

</ContentPage>  

In above Xaml code, we can observe that there are five Entry fields (bind to UserName, PhoneNumber, Email, Password, ConfirmPassword) and one Button (bind to RegisterCommand). These source properties should be added in our view model.

So create ViewModels folder, after that right click on ViewModels folder => Add =>New File => General => Empty Class and name it UserRegistrationViewModel like below.

UserRegistrationViewModel.cs

Now open UserRegistrationViewModel.cs file and below code:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows.Input;
using FluentValidation;
using FluentValidationSample.Models;
using Xamarin.Forms;
namespace FluentValidationSample.ViewModels
{
public class UserRegistrationViewModel: INotifyPropertyChanged
{
public ICommand RegisterCommand { get; set; }
readonly IValidator _validator;
public UserRegistrationViewModel()
{
_validator = new UserValidator();
RegisterCommand = new Command(RegisterValidation);
}
void RegisterValidation()
{
var userObj = new UserInfo
{
UserName = UserName,
PhoneNumber = PhoneNumber,
Email = Email,
Password = Password,
ConfirmPassword = ConfirmPassword,
};
var validationResults = _validator.Validate(userObj);
if (validationResults.IsValid)
{
App.Current.MainPage.DisplayAlert("FluentValidation", "Validation Success..!!", "Ok");
}
else
{
App.Current.MainPage.DisplayAlert("FluentValidation", validationResults.Errors[0].ErrorMessage, "Ok");
}
}
string _userName;
public string UserName
{
get { return _userName; }
set { SetProperty(ref _userName, value); }
}
string _phoneNumber;
public string PhoneNumber
{
get { return _phoneNumber; }
set { SetProperty(ref _phoneNumber, value); }
}
string _email;
public string Email
{
get { return _email; }
set { SetProperty(ref _email, value); }
}
string _password;
public string Password
{
get { return _password; }
set { SetProperty(ref _password, value); }
}
string _confirmPassword;
public string ConfirmPassword
{
get { return _confirmPassword; }
set { SetProperty(ref _confirmPassword, value); }
}
protected bool SetProperty<T>(ref T backingStore, T value,
[CallerMemberName]string propertyName = "",
Action onChanged = null)
{
if (EqualityComparer<T>.Default.Equals(backingStore, value))
return false;
backingStore = value;
onChanged?.Invoke();
OnPropertyChanged(propertyName);
return true;
}
#region INotifyPropertyChanged
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
{
var changed = PropertyChanged;
if (changed == null)
return;
changed.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
#endregion
}
}

UserRegistration.xaml.cs

Now in UserRegistration.xaml.cs, we have to set BindingContext by passing passing above view model object like below:

using FluentValidationSample.ViewModels;
using Xamarin.Forms;
namespace FluentValidationSample.Views
{
public partial class UserRegistration : ContentPage
{
public UserRegistration()
{
InitializeComponent();
BindingContext = new UserRegistrationViewModel();
}
}
}

3. How to create Fluentvalidation rules to validate registration page?

We need to follow below few steps to create FluentValidation rules in Xamarin.Forms.

Step 1: Add FluentValidation Nuget Package:

Right click on Packages folder => Add Packages.

After that Add Packages windows will open, search for "FluentValidation" and click on Add Package to install it.

Now your PCL project should include above package like below:

Step 2: Create a Class that properties need to validate:

Create Models folder in PCL, after that right click on Models folder => Add =>New File => General => Empty Class and name it UserInfo like below.

UserInfo.cs

Open UnserInfo file and add below properties:

using System;  

namespace FluentValidationSample.Models  

{

    public class UserInfo  

{

        public string UserName { get; set; }  

        public string PhoneNumber { get; set; }  

        public string Email { get; set; }  

        public string Password { get; set; }  

        public string ConfirmPassword { get; set; }  

}

}

Step 3: Create a Class that should have validation rules:

In Models folder, create a class that should inherit the AbstractValidator class with the type UserInfo class like below:
UserValidator.cs

using FluentValidation;
namespace FluentValidationSample.Models
{
public class UserValidator : AbstractValidator<UserInfo>
{
public UserValidator()
{
RuleFor(x => x.UserName).NotNull().Length(8, 20);
RuleFor(x => x.PhoneNumber).NotNull().MinimumLength(10);
RuleFor(x => x.Email).NotNull().EmailAddress().WithMessage("Invalid Email.");
RuleFor(x => x.Password).NotNull().Length(8);
RuleFor(x => x.ConfirmPassword).NotNull().Equal(x => x.Password);
}
}
}

In above class, we can see there is list of rules to validate UserInfo object properties:

UserName: It should not be null and user name length should between 8 to 20 characters.
Phone Number: It should not be nulll and minimum length should be 10 characters.
Email: It should not be null and it should have a email format.
Password: It should not be nulll and length should be equal to 8 characters.
ConfirmPassword: It should not be nulll and string should be equal to password value string.

4. How to call Fluentvalidation validator class from view model?

In above step, we have completed validator class rules and now we have to learn to use.

So in our view model constructor create object for IValidator which will define validator for particular type.

readonly IValidator _validator;
public UserRegistrationViewModel() {
_validator = new UserValidator();
}

Now create UserInfo object and set user input values for it and pass it to IValidator Validate method like below

void ValidateUserInfo()
{
var userObj = new UserInfo
{
UserName = UserName,
PhoneNumber = PhoneNumber,
Email = Email,
Password = Password,
ConfirmPassword = ConfirmPassword,
};
var validationResults = _validator.Validate(userObj);
if (validationResults.IsValid)
{
App.Current.MainPage.DisplayAlert("FluentValidation", "Validation Success..!!", "Ok");
}
else
{
App.Current.MainPage.DisplayAlert("FluentValidation", validationResults.Errors[0].ErrorMessage, "Ok");
}
}

5. How to set default view model Command for Registration submit Button Submit?

When user fill all fields and tap on Register button to submit form, we need to invoke above ValidateUserInfo method which was declared in view model. So we have to create Icommand property that should invoke the method like below:

public ICommand RegisterCommand { get; set; }
readonly IValidator _validator;
public UserRegistrationViewModel()
{
_validator = new UserValidator();
RegisterCommand = new Command(RegisterValidation);
}
void RegisterValidation()
{
var userObj = new UserInfo
{
UserName = UserName,
PhoneNumber = PhoneNumber,
Email = Email,
Password = Password,
ConfirmPassword = ConfirmPassword,
};
var validationResults = _validator.Validate(userObj);
if (validationResults.IsValid)
{
App.Current.MainPage.DisplayAlert("FluentValidation", "Validation Success..!!", "Ok");
}
else
{
App.Current.MainPage.DisplayAlert("FluentValidation", validationResults.Errors[0].ErrorMessage, "Ok");
}
}

Also in our xaml code, for Register button we need to bind above ICommand like below:

<Button Text="Register" HorizontalOptions="FillAndExpand" TextColor="Blue" Command="{Binding RegisterCommand}" HeightRequest="40" BackgroundColor="White"/>

Demo screens from Android:

Demo screens from iOS:

You can directly work on below sample source code to understand the this article.

FeedBack Note: Please share your thoughts, what you think about this post, Is this post really helpful for you? Otherwise, it would be very happy, if you have any thoughts for to implement this requirement in any other way? I always welcome if you drop comments on this post and it would be impressive.

Follow me always at @Subramanyam_B
Have a nice day by Subramanyam Raju :)