Projects with too much Inputs, can be difficult to validate you inputs. I’ll share easiy way to validate your inputs and it’ll make quick your job.
INSTALLATION
Firstly add Xamarin.Form.InputKit Nuget Package to your project.
If you want to display an alert icon in AdvancedEntry, you should add an 24dp icon which named as alert.png
USING
Generating View
Just create a registration form like below:
Before start to use controls from InputKit, you need to add an attribute inside ContentPage tag. Just add
xmlns:input=”clr-namespace:Plugin.InputKit.Shared.Controls;assembly=Plugin.InputKit”
then you’re ready to use controls.
After that, XAML will be like:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:FormViewSample.InputKit"
xmlns:input="clr-namespace:Plugin.InputKit.Shared.Controls;assembly=Plugin.InputKit"
x:Class="FormViewSample.InputKit.MainPage"
BackgroundColor="WhiteSmoke">
<ContentPage.BindingContext>
<local:MainViewModel/>
</ContentPage.BindingContext>
<ContentPage.Content>
<StackLayout Padding="30">
<Label Text="You can see FormView Below:"/>
<BoxView HeightRequest="1" Color="LightGray" />
<input:FormView IsValidated="{Binding IsValidated}">
<input:AdvancedEntry
Text="{Binding Email}"
IsRequired="True"
Title="Place your email below:"
Annotation="Email"
Placeholder="sample@domain.com"
AnnotationColor="Accent"
ValidationMessage="Please type a valid email address"
IconImage="ic_email_black_24dp.png"
MinLength="10"
MaxLength="50"
/>
<input:AdvancedEntry
Text="{Binding NameSurname}"
IsRequired="True"
Title="Place your name below:"
Annotation="NameSurname"
Placeholder="John Doe"
AnnotationColor="Accent"
ValidationMessage="Please type your name correctly"
IconImage="ic_account_circle_black_24dp.png"
MinLength="5"
MaxLength="30"
/>
<input:AdvancedEntry
Text="{Binding Phone}"
IsRequired="True"
Title="Place your phone number below:"
Annotation="Phone"
Placeholder="5439998877"
AnnotationColor="Accent"
ValidationMessage="Please type your phone number correctly"
IconImage="ic_account_circle_black_24dp.png"
MaxLength="10"
/>
<Label Text="Choose your subscription type:" />
<input:RadioButtonGroupView IsRequired="True">
<input:RadioButton Text="Free" />
<input:RadioButton Text="Bronze" />
<input:RadioButton Text="Gold" />
<input:RadioButton Text="Platinium" />
</input:RadioButtonGroupView>
<input:CheckBox IsRequired="True" Type="Check" Text="I Accept User Agreement" />
<Button Command="{Binding SubmitCommand}" Margin="0,20" Text="Submit" BackgroundColor="Accent" CornerRadius="20" TextColor="White" />
</input:FormView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:FormViewSample.InputKit"
xmlns:input="clr-namespace:Plugin.InputKit.Shared.Controls;assembly=Plugin.InputKit"
x:Class="FormViewSample.InputKit.MainPage"
BackgroundColor="WhiteSmoke">
<ContentPage.BindingContext>
<local:MainViewModel/>
</ContentPage.BindingContext>
<ContentPage.Content>
<StackLayout Padding="30">
<Label Text="You can see FormView Below:"/>
<BoxView HeightRequest="1" Color="LightGray" />
<input:FormView IsValidated="{Binding IsValidated}">
<input:AdvancedEntry
Text="{Binding Email}"
IsRequired="True"
Title="Place your email below:"
Annotation="Email"
Placeholder="sample@domain.com"
AnnotationColor="Accent"
ValidationMessage="Please type a valid email address"
IconImage="ic_email_black_24dp.png"
MinLength="10"
MaxLength="50"
/>
<input:AdvancedEntry
Text="{Binding NameSurname}"
IsRequired="True"
Title="Place your name below:"
Annotation="NameSurname"
Placeholder="John Doe"
AnnotationColor="Accent"
ValidationMessage="Please type your name correctly"
IconImage="ic_account_circle_black_24dp.png"
MinLength="5"
MaxLength="30"
/>
<input:AdvancedEntry
Text="{Binding Phone}"
IsRequired="True"
Title="Place your phone number below:"
Annotation="Phone"
Placeholder="5439998877"
AnnotationColor="Accent"
ValidationMessage="Please type your phone number correctly"
IconImage="ic_account_circle_black_24dp.png"
MaxLength="10"
/>
<Label Text="Choose your subscription type:" />
<input:RadioButtonGroupView IsRequired="True">
<input:RadioButton Text="Free" />
<input:RadioButton Text="Bronze" />
<input:RadioButton Text="Gold" />
<input:RadioButton Text="Platinium" />
</input:RadioButtonGroupView>
<input:CheckBox IsRequired="True" Type="Check" Text="I Accept User Agreement" />
<Button Command="{Binding SubmitCommand}" Margin="0,20" Text="Submit" BackgroundColor="Accent" CornerRadius="20" TextColor="White" />
</input:FormView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Generating ViewModel
ViewModel will be like. IsValidated proeprty will be set from FormView and you’ll check that property for know each input validated or not.
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Text;
using Xamarin.Forms;
namespace FormViewSample.InputKit
{
public class MainViewModel : INotifyPropertyChanged
{
private string _nameSurname;
private string _email;
private string _phone;
public MainViewModel()
{
SubmitCommand = new Command(Submit);
}
public Command SubmitCommand { get; set; }
public bool IsValidated { get; set; }
public string NameSurname { get => _nameSurname; set { _nameSurname = value; OnPropertyChanged(); } }
public string Email { get => _email; set { _email = value; OnPropertyChanged(); } }
public string Phone { get => _phone; set { _phone = value; OnPropertyChanged(); } }
async void Submit()
{
if (!IsValidated)
{
await Application.Current.MainPage.DisplayAlert("", "You must fill all areas correctly!", "OK");
}
//DO SOME STUFFS HERE
}
#region INotifyPropertyChanged Implementation
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged([CallerMemberName]string propName = "") => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName));
#endregion
}
}
using System.Collections.Generic;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Text;
using Xamarin.Forms;
namespace FormViewSample.InputKit
{
public class MainViewModel : INotifyPropertyChanged
{
private string _nameSurname;
private string _email;
private string _phone;
public MainViewModel()
{
SubmitCommand = new Command(Submit);
}
public Command SubmitCommand { get; set; }
public bool IsValidated { get; set; }
public string NameSurname { get => _nameSurname; set { _nameSurname = value; OnPropertyChanged(); } }
public string Email { get => _email; set { _email = value; OnPropertyChanged(); } }
public string Phone { get => _phone; set { _phone = value; OnPropertyChanged(); } }
async void Submit()
{
if (!IsValidated)
{
await Application.Current.MainPage.DisplayAlert("", "You must fill all areas correctly!", "OK");
}
//DO SOME STUFFS HERE
}
#region INotifyPropertyChanged Implementation
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged([CallerMemberName]string propName = "") => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName));
#endregion
}
}
Şimdi gidip XAML kısmından ViewModel’i kullandığımızı belirltelim:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:FormViewSample.InputKit"
xmlns:input="clr-namespace:Plugin.InputKit.Shared.Controls;assembly=Plugin.InputKit"
x:Class="FormViewSample.InputKit.MainPage"
BackgroundColor="WhiteSmoke">
<ContentPage.BindingContext>
<local:MainViewModel/>
</ContentPage.BindingContext>
...
...
...
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:FormViewSample.InputKit"
xmlns:input="clr-namespace:Plugin.InputKit.Shared.Controls;assembly=Plugin.InputKit"
x:Class="FormViewSample.InputKit.MainPage"
BackgroundColor="WhiteSmoke">
<ContentPage.BindingContext>
<local:MainViewModel/>
</ContentPage.BindingContext>
...
...
...
You can find sample project from here.
