Validation on Xamarin Forms

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.
Xamarin Forms InputKit Checkbox Radio Button Enis Necipoğlu

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:
Xamarin Forms Validation Annotation InputKit

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>

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
    }
}

Ş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>
...
...
...

You can find sample project from here.

label, , , , , , , , ,

Add a Comment

Your email address will not be published. Required fields are marked *