Data validation in WINRT

Data validation in WINRT

A common requirement for any user interface application that accepts user input is to validate the entered information to ensure that it has the expected format and type for the back-end to be able to accept and persist it . 

This post is about how data validation works in WINRT. Winrt Xaml doesn’t have inbuilt mechanism for data validation.  I have added Data validation extension.The extension have different validation options are.  The extension support  the following validation format 

 

Ø  Nonempty                   -              Field shouldn't be empty 
Ø  AlphaOnly                  -          Field should accept alpha only 
Ø  NonemptyAlphabets   -   Field shouldn't be empty and accept alpha character only 
Ø  NumericOnly     -   Field should accept numeric only 
Ø  NonemptyNumeric -              Field shouldn't be empty and accept numeric only 
Ø  MatchesRegexPattern  -              Field should be accept matched regex pattern value only 
Ø  Nonempty MatchesRegexPattern  -        Field should accept matched regex pattern value only and not empty

This extension have errorchanged event in code – behind for handling validation to customize your own logic. The following UI property used for validation extension

Ø  ErrorMessage
Ø  Format
Ø  RegexPattern

Format :

                Property used for type of validation

                control:ValidationExtensions.Format="AlphaOnly"

ErrorMessage :

                Property used to display error message in UI

       control:ValidationExtensions.ErrorMessage="Field should be accept alpha only"

RegexPattern

                Property to validate custom regex format

         control:ValidationExtensions. RegexPattern =" ^([A-Za-z]|[0-9]|_)+$"

ErrorChanged

                Errorchanged event to give the following information from user input. So that we can customize your own logic in code- behind 

Ø  ControlId             - Identify the controlid from the user modified control
Ø  InputValue         - To get the modified value from the user
Ø  DetectChanges - Gets the Boolean value indication whether is modified user or assign value from code begind
Ø  ErrorMessage    - Gets the error message from the user modified control

                ValidationExtensions.ErrorChanged += ValidationExtensionsErrorChanged;

CODE :

<Page

    x:Class="DataValidation.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:DataValidation"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    xmlns:Extension ="using:Validation.Extension"

    mc:Ignorable="d">

    <Page.Resources>

        <Style

            x:Key="ValidationErrorLabelStyle"

            TargetType="TextBlock">

            <Setter

                Property="Foreground"

                Value="Red" />

            <Setter

                Property="FontSize"

                Value="14" />

            <Setter Property="VerticalAlignment" Value="Center">

               

            </Setter>

            <Setter

                Property="Margin"

                Value="5,0,0,0" />

        </Style>

    </Page.Resources>

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" >

        <Grid.RowDefinitions>

            <RowDefinition Height="40"/>

            <RowDefinition Height="40"/>

            <RowDefinition Height="40"/>

            <RowDefinition Height="40"/>

            <RowDefinition Height="40"/>

            <RowDefinition Height="40"/>

            <RowDefinition Height="40"/>

            <RowDefinition Height="40"/>

            <RowDefinition Height="40"/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="400"/>

            <ColumnDefinition Width="400"/>

            <ColumnDefinition Width="*"/>

        </Grid.ColumnDefinitions>

        <TextBlock Text="First Name" Grid.Row="0" Grid.Column="0" />

        <TextBox x:Name="txtName" Grid.Row="0" Grid.Column="1"

         Extension:ValidationExtensions.ErrorMessage="First Name shouldn't empty and accept alpha charactor only"

         Extension:ValidationExtensions.Format="NonemptyAlphabets" Height="30" />

        <TextBlock x:Name="lblNameError" Grid.Row="0" Grid.Column="2"

         Style="{StaticResource ValidationErrorLabelStyle}"

         Text="{Binding (Extension:ValidationExtensions.ErrorMessage), ElementName=txtName}"

         Visibility="{Binding (Extension:ValidationExtensions.ValidationMessageVisibility),ElementName=txtName}"/>

        <TextBlock Text="Last Name" Grid.Row="1"/>

        <TextBox x:Name="txtlastName" Grid.Row="1" Grid.Column="1"

         Extension:ValidationExtensions.ErrorMessage="Last name should be alpha charactor only"

         Extension:ValidationExtensions.Format="AlphaOnly" Height="30"/>

        <TextBlock Grid.Row="1" Grid.Column="2"

                     Style="{StaticResource ValidationErrorLabelStyle}"

         Text="{Binding (Extension:ValidationExtensions.ErrorMessage), ElementName=txtlastName}"

         Visibility="{Binding (Extension:ValidationExtensions.ValidationMessageVisibility), ElementName=txtlastName}"/>

        <TextBlock Text="Age" Grid.Row="2"/>

        <TextBox x:Name="txtage" Grid.Row="2" Grid.Column="1"

         Extension:ValidationExtensions.ErrorMessage="Age shouldn't be empty and accept number only "

         Extension:ValidationExtensions.Format="NonemptyNumeric" Height="30"/>

        <TextBlock Grid.Row="2" Grid.Column="2"

                     Style="{StaticResource ValidationErrorLabelStyle}"

         Text="{Binding (Extension:ValidationExtensions.ErrorMessage), ElementName=txtage}"

         Visibility="{Binding (Extension:ValidationExtensions.ValidationMessageVisibility), ElementName=txtage}"/>

        <TextBlock Text="Phone No" Grid.Row="3"/>

        <TextBox x:Name="txtPhoneno" Grid.Row="3" Grid.Column="1"

         Extension:ValidationExtensions.ErrorMessage="Phone Number accept number only "

         Extension:ValidationExtensions.Format="NumericOnly" Height="30"/>

        <TextBlock Grid.Row="3" Grid.Column="2"

                     Style="{StaticResource ValidationErrorLabelStyle}"

         Text="{Binding (Extension:ValidationExtensions.ErrorMessage), ElementName=txtPhoneno}"

         Visibility="{Binding (Extension:ValidationExtensions.ValidationMessageVisibility), ElementName=txtPhoneno}"/>

        <TextBlock Text="Email" Grid.Row="4"/>

        <TextBox x:Name="txtemail" Grid.Row="4" Grid.Column="1"

        Extension:ValidationExtensions.ErrorMessage="Enter valid email address"

                  Extension:ValidationExtensions.RegexPattern="^([\w\.\-]+)@([\w\-]+)((\.(\w){2,3})+)$"

         Extension:ValidationExtensions.Format="NoneEmptyMatchesRegexPattern" Height="30"/>

        <TextBlock Grid.Row="4" Grid.Column="2"

                     Style="{StaticResource ValidationErrorLabelStyle}"

         Text="{Binding (Extension:ValidationExtensions.ErrorMessage), ElementName=txtemail}"

         Visibility="{Binding (Extension:ValidationExtensions.ValidationMessageVisibility), ElementName=txtemail}"/>

    </Grid>

</Page>