Input Validation In Xamarin Forms Behaviors

Introduction

Xamarin.Forms Behaviors are created by deriving from the Behavior or Behavior<T> class, where T is the type of the control (Entry, DateTime, etc) to which the Behavior should apply.

In this article, I will demonstrate how to create and consume Xamarin.Forms Behaviors and input validation, using Xamarin Forms Behaviors.

Why Do We Need Behaviors?

Normally, we will write the validation code into the code at the backend because it directly interacts with API of the control, so that we can create Behaviors and reuse them into the different controls. They can be used to provide a full range of the functionality to the controls, as shown below-

• Number validation
• Date validation
• Email validation \
• Password validation
• Compare validation

Building and Running the Application

To create Xamarin.Forms Behaviors Application, follow the steps, given below- 

Step 1 - Create new Xamarin Form Application

Let's start with creating a new Xamarin Forms Project in Visual Studio.

Open Run - Type Devenev.Exe and enter - New Project (Ctrl+Shift+N) - select Blank Xaml app (Xamarin.Forms Portable) template.



You can find my previous article for more ways to create new Xamarin.Form Application here.

Step 2 – Create new class and inherit from the Behavior

Create a new class and it inherits from the Behavior or Behavior<T> class. We can add the behavior to any control, so you can specify your control name instead of T.



Step 3 –Override Behavior class method

We need to override OnAttachedTo and OnDetachingFrom method from our validation class.



The OnAttachedTo method is fired immediately after the behavior is attached to a control. This can be used to register event handlers or perform other setup that's required to support the behavior functionality.

The OnDetachingFrom method is fired when the behavior is removed from the control. This method receives a reference to the control to which it is attached, and is used to perform any required cleanup.

Step 4 –Validation Behavior Class

1. PasswordValidationBehavior
   
   The code, given below is Password validation Behaviors. Password rule should contain at least 8 characters, 1 numeric, 1 lowercase, 1 uppercase, 1 special character [eg: No1C#cornar]
   
   The Password validation Behavior is added into Entry control. We can re-use this Behavior to Entry control.
   

   using System.Text.RegularExpressions;
   using Xamarin.Forms;
   
   namespace DevenvExeBehaviors
   {
       public class PasswordValidationBehavior : Behavior<Entry>
       {
           const string passwordRegex = @"^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$";
   
   
           protected override void OnAttachedTo(Entry bindable)
           {
               bindable.TextChanged += HandleTextChanged;
               base.OnAttachedTo(bindable);
           }
   
           void HandleTextChanged(object sender, TextChangedEventArgs e)
           {
               bool IsValid = false;
               IsValid = (Regex.IsMatch(e.NewTextValue, passwordRegex));
               ((Entry)sender).TextColor = IsValid ? Color.Default : Color.Red;
           }
   
           protected override void OnDetachingFrom(Entry bindable)
           {
               bindable.TextChanged -= HandleTextChanged;
               base.OnDetachingFrom(bindable);
           }
       }
   }

2. Date Validation Behaviors
   
   The code, given below, is Date of birth validation Behaviors. I used a DatePicker and restricted the max date to be 100 years from the current day and min date to be one.
   
   The DOB validation Behavior is added into DatePicker control. We can re-use this Behavior to Date Picker control.
   

   using System;
   using Xamarin.Forms;
   namespace DevenvExeBehaviors
   {
       class DateValidationBehavior : Behavior<DatePicker>
       {
           protected override void OnAttachedTo(DatePicker datepicker)
           {
               datepicker.DateSelected += Datepicker_DateSelected;
               base.OnAttachedTo(datepicker);
           }
   
           private void Datepicker_DateSelected(object sender, DateChangedEventArgs e)
           {
               DateTime value = e.NewDate;
               int year = DateTime.Now.Year;
               int selyear = value.Year;
               int result = selyear - year;
               bool isValid=false;
               if(result <=100 && result >0)
               {
                   isValid = true;
               }
              ((DatePicker)sender).BackgroundColor = isValid ? Color.Default : Color.Red;
           }
   
           protected override void OnDetachingFrom(DatePicker datepicker)
           {
               datepicker.DateSelected -= Datepicker_DateSelected;
               base.OnDetachingFrom(datepicker);
           }
   
   
       }
   }

3. EmailValidation Behaviors
   
   The code, given below, is Email validation Behaviors. Email validation Behavior is added into Entry control. We can re-use this Behavior to Entry control.
   

   using System;
   using System.Text.RegularExpressions;
   using Xamarin.Forms;
   
   namespace DevenvExeBehaviors
   {
       public class EmailValidatorBehavior : Behavior<Entry>
       {
           const string emailRegex = @"^(?("")("".+?(?<!\\)""@)|(([0-9a-z]((\.(?!\.))|[-!#\$%&'\*\+/=\?\^`\{\}\|~\w])*)(?<=[0-9a-z])@))" +
               @"(?(\[)(\[(\d{1,3}\.){3}\d{1,3}\])|(([0-9a-z][-\w]*[0-9a-z]*\.)+[a-z0-9][\-a-z0-9]{0,22}[a-z0-9]))$";
   
   
           protected override void OnAttachedTo(Entry bindable)
           {
               bindable.TextChanged += HandleTextChanged;
               base.OnAttachedTo(bindable);
           }
   
           void HandleTextChanged(object sender, TextChangedEventArgs e)
           {
               bool IsValid = false;
               IsValid = (Regex.IsMatch(e.NewTextValue, emailRegex, RegexOptions.IgnoreCase, TimeSpan.FromMilliseconds(250)));
               ((Entry)sender).TextColor = IsValid ? Color.Default : Color.Red;
           }
   
           protected override void OnDetachingFrom(Entry bindable)
           {
               bindable.TextChanged -= HandleTextChanged;
               base.OnDetachingFrom(bindable);
           }
       }
   }

4. Number Validation
   
   The code, given below, is Number validation Behaviors. The Entry box will allow only the numeric value.
   

   using Xamarin.Forms;
   
   namespace DevenvExeBehaviors
   {
       public class NumberValidationBehavior : Behavior<Entry>
       {
           protected override void OnAttachedTo(Entry entry)
           {
               entry.TextChanged += OnEntryTextChanged;
               base.OnAttachedTo(entry);
           }
   
           protected override void OnDetachingFrom(Entry entry)
           {
               entry.TextChanged -= OnEntryTextChanged;
               base.OnDetachingFrom(entry);
           }
   
           void OnEntryTextChanged(object sender, TextChangedEventArgs args)
           {
               int result;
   
               bool isValid = int.TryParse(args.NewTextValue, out result);
   
               ((Entry)sender).TextColor = isValid ? Color.Default : Color.Red;
           }
       }
   }

Step 5 – Behaviors with Parameter

You can create multiple properties in behaviors class and assign the value in XAML controls.

1. Max length Behaviors
   
   You can restrict the number of characters in the Entry field, as given below-
   

   using Xamarin.Forms;
   
   namespace DevenvExeBehaviors
   {
       public class MaxLengthValidatorBehavior : Behavior<Entry>
       {
            public static readonly BindableProperty MaxLengthProperty = BindableProperty.Create("MaxLength", typeof(int), typeof(MaxLengthValidatorBehavior), 0);
   
           public int MaxLength
           {
               get { return (int)GetValue(MaxLengthProperty); }
               set { SetValue(MaxLengthProperty, value); }
           }
   
           protected override void OnAttachedTo(Entry bindable)
           {
               bindable.TextChanged += bindable_TextChanged;
           }
   
           private void bindable_TextChanged(object sender, TextChangedEventArgs e)
           {
                     if (e.NewTextValue.Length >= MaxLength)
                       ((Entry)sender).Text = e.NewTextValue.Substring(0, MaxLength);                    }
   
           protected override void OnDetachingFrom(Entry bindable)
           {
               bindable.TextChanged -= bindable_TextChanged;
   
           }
       }
   }

2. Compare Validation
   
   CompareValidator control allows you to compare the value entered by the user into an input control, such as an Entry control with the value entered into another Entry control.
   

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Text;
   using System.Text.RegularExpressions;
   using System.Threading.Tasks;
   using Xamarin.Forms;
   
   namespace DevenvExeBehaviors
   {
   
       public class CompareValidationBehavior : Behavior<Entry>
       {
   
           public static BindableProperty TextProperty = BindableProperty.Create<CompareValidationBehavior, string>(tc => tc.Text, string.Empty, BindingMode.TwoWay);
   
           public string Text
           {
               get
               {
                   return (string)GetValue(TextProperty);
               }
               set
               {
                   SetValue(TextProperty, value);
               }
           }
   
   
           protected override void OnAttachedTo(Entry bindable)
           {
               bindable.TextChanged += HandleTextChanged;
               base.OnAttachedTo(bindable);
           }
   
           void HandleTextChanged(object sender, TextChangedEventArgs e)
           {
               bool IsValid = false;
               IsValid =  e.NewTextValue ==Text;
   
               ((Entry)sender).TextColor = IsValid ? Color.Default : Color.Red;
           }
   
           protected override void OnDetachingFrom(Entry bindable)
           {
               bindable.TextChanged -= HandleTextChanged;
               base.OnDetachingFrom(bindable);
           }
       }
   }

Step 6 – Add Behaviors into Control

Refer to the XAML code, given below, to add behaviors into entry box, as given below-

<Entry x:Name="txtpassword" IsPassword="True" Placeholder="Enter Your Password" >
      <Entry.Behaviors>
        <local:PasswordValidationBehavior />
      </Entry.Behaviors>
    </Entry>

Step 7 – Add Multiple Behaviors into Control

Refer to the code, given below, to attach multiple behaviors into single entry box and pass the parameter value, as given below-

<Entry IsPassword="True" Placeholder="Enter same as above" >
      <Entry.Behaviors>
        <local:PasswordValidationBehavior />
        <local:CompareValidationBehavior BindingContext="{x:Reference txtpassword}" Text="{Binding Text}"/>
      </Entry.Behaviors>
    </Entry>

Step 8 - UI Design

You can refer to the UI Design for all control and Behaviors Design, as given below-

<?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:DevenvExeBehaviors"
             x:Class="DevenvExeBehaviors.MainPage" >
  <StackLayout Padding="0,20,0,0">

    <Label Text="Name" FontSize="Small" />
    <Entry Placeholder="Enter Your Name" />
    <Label Text="Age" FontSize="Small" />
    <Entry Placeholder="Age" FontSize="Small">
      <Entry.Behaviors>
        <local:MaxLengthValidatorBehavior  MaxLength="2"/>
        <local:NumberValidationBehavior/>
      </Entry.Behaviors>
    </Entry>

    <Label Text="DOB" FontSize="Small" />
    <DatePicker >
      <DatePicker.Behaviors>
        <local:DateValidationBehavior/>
      </DatePicker.Behaviors>
    </DatePicker>

    <Label Text="Email" FontSize="Small" />
    <Entry Placeholder="Enter Your Email ID" >
      <Entry.Behaviors>
        <local:EmailValidatorBehavior />
      </Entry.Behaviors>
    </Entry>
    <Label Text="Password" FontSize="Small" />
    <Entry x:Name="txtpassword" IsPassword="True" Placeholder="Enter Your Password" >
      <Entry.Behaviors>
        <local:PasswordValidationBehavior />
      </Entry.Behaviors>
    </Entry>

    <Label Text="Confirm Password" FontSize="Small" />
    <Entry IsPassword="True" Placeholder="Enter same as above" >
      <Entry.Behaviors>
        <local:PasswordValidationBehavior />
        <local:CompareValidationBehavior BindingContext="{x:Reference txtpassword}" Text="{Binding Text}"/>
      </Entry.Behaviors>
    </Entry>
    <Label Text="Phone Number" FontSize="Small" />
    <Entry  Placeholder="Enter 10 digit phone number" >
      <Entry.Behaviors>
        <local:MaxLengthValidatorBehavior  MaxLength="10"/>
        <local:NumberValidationBehavior />
      </Entry.Behaviors>
    </Entry>
  </StackLayout>

</ContentPage>

You can download the sample source code and run the Application.