Post
Ask Question

WPF Required Field Validation

In this blog I will show you how can we apply validation in WPF as displayed in below screenshot:

validation

Step 1: Design a keying screen like the image being displayed below,

Design 1

Step 2: Add a class User.cs,

  1. namespace DotnetBullet.WPFValidationWay1    
  2. {    
  3.     public class User    
  4.     {    
  5.         #region Variables    
  6.         string _userName = string.Empty;    
  7.         int _age;    
  8.         string _mobileNo = string.Empty;     
  9.         #endregion    
  10.    
  11.         #region Properties    
  12.         /// <summary>    
  13.         /// Gets or sets the name of the user.    
  14.         /// </summary>    
  15.         /// <value>    
  16.         /// The name of the user.    
  17.         /// </value>    
  18.         public string UserName    
  19.         {    
  20.             get    
  21.             {    
  22.                 return _userName;    
  23.             }    
  24.             set    
  25.             {    
  26.                 _userName = value;    
  27.             }    
  28.         }    
  29.     
  30.         /// <summary>    
  31.         /// Gets or sets the age.    
  32.         /// </summary>    
  33.         /// <value>    
  34.         /// The age.    
  35.         /// </value>    
  36.         public int Age    
  37.         {    
  38.             get    
  39.             {    
  40.                 return _age;    
  41.             }    
  42.             set    
  43.             {    
  44.                 _age = value;    
  45.             }    
  46.         }    
  47.     
  48.         /// <summary>    
  49.         /// Gets or sets the mobile no.    
  50.         /// </summary>    
  51.         /// <value>    
  52.         /// The mobile no.    
  53.         /// </value>    
  54.         public string MobileNo    
  55.         {    
  56.             get    
  57.             {    
  58.                 return _mobileNo;    
  59.             }    
  60.             set    
  61.             {    
  62.                 _mobileNo = value;    
  63.             }    
  64.         }     
  65.         #endregion    
  66.     }    
  67. }    
Step 3: Add a class RequiredFiedValidationRule.cs for Required Field Validation,
  1. using System.Globalization;    
  2. using System.Windows.Controls;    
  3.     
  4. namespace DotnetBullet.WPFValidationWay1    
  5. {    
  6.     class RequiredFiedValidationRule : ValidationRule    
  7.     {    
  8.         public RequiredFiedValidationRule()    
  9.         {    
  10.     
  11.         }    
  12.         public override ValidationResult Validate(object value, CultureInfo cultureInfo)    
  13.         {    
  14.             if (value.ToString().Length > 0)    
  15.             {    
  16.                 return new ValidationResult(true, null);    
  17.             }    
  18.             else    
  19.             {    
  20.                 return new ValidationResult(false, "Required Field Validation");    
  21.             }    
  22.         }    
  23.     }    
  24. }    
Step 4: Add Control Template like this:
  1. <ControlTemplate x:Key="validationTemplate">    
  2.             <DockPanel>    
  3.                 <TextBlock Foreground="Red" FontSize="25" Text="*" DockPanel.Dock="Right"> 
  4.                   </TextBlock>    
  5.                 <AdornedElementPlaceholder/>    
  6.             </DockPanel>    
  7. </ControlTemplate>    
Step 5: Add Style,
  1. <Style x:Key="InputControlErrors" TargetType="{x:Type TextBox}">    
  2.             <Style.Triggers>    
  3.                 <Trigger Property="Validation.HasError" Value="true">    
  4.                     <Setter Property="ToolTip"    
  5.               Value="{Binding RelativeSource={x:Static RelativeSource.Self},    
  6.                               Path=(Validation.Errors)[0].ErrorContent}"/>    
  7.                 </Trigger>    
  8.             </Style.Triggers>    
  9.         </Style>    
Step 6: Modify textbox XAML,
  1. <TextBox HorizontalAlignment="Left" Height="23" Margin="159,14,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="258"     
  2.                  Validation.ErrorTemplate="{StaticResource validationTemplate}" Style="{StaticResource InputControlErrors}"    
  3.                  Name="txtName">    
  4.             <TextBox.Text>    
  5.                 <Binding Path="UserName" Source="{StaticResource user}" UpdateSourceTrigger="PropertyChanged">    
  6.                     <Binding.ValidationRules>    
  7.                         <c:RequiredFiedValidationRule></c:RequiredFiedValidationRule>    
  8.                     </Binding.ValidationRules>    
  9.                 </Binding>    
  10.             </TextBox.Text>    
  11.                 
  12.         </TextBox>   
Repeat the same for all the 3 controls.

The complete XAML code for UI is as follows:
  1. <Window x:Class="DotnetBullet.WPFValidationWay1.MainWindow"    
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
  4.         xmlns:c="clr-namespace:DotnetBullet.WPFValidationWay1"    
  5.         Title="DotNetBullet.com Binding Validation Way" Height="250" Width="450">    
  6.     
  7.     <Window.Resources>    
  8.         <c:User x:Key="user"/>    
  9.         <ControlTemplate x:Key="validationTemplate">    
  10.             <DockPanel>    
  11.                 <TextBlock Foreground="Red" FontSize="25" Text="*" DockPanel.Dock="Right"></TextBlock>    
  12.                 <AdornedElementPlaceholder/>    
  13.             </DockPanel>    
  14.         </ControlTemplate>    
  15.             
  16.         <Style x:Key="InputControlErrors" TargetType="{x:Type TextBox}">    
  17.             <Style.Triggers>    
  18.                 <Trigger Property="Validation.HasError" Value="true">    
  19.                     <Setter Property="ToolTip"    
  20.               Value="{Binding RelativeSource={x:Static RelativeSource.Self},    
  21.                               Path=(Validation.Errors)[0].ErrorContent}"/>    
  22.                 </Trigger>    
  23.             </Style.Triggers>    
  24.         </Style>    
  25.     </Window.Resources>    
  26.     
  27.     <Grid Margin="0,0,0,5">    
  28.         <Label Content="Name" HorizontalAlignment="Left" Margin="42,10,0,0" VerticalAlignment="Top"/>    
  29.         <Label Content="Age" HorizontalAlignment="Left" Margin="42,67,0,0" VerticalAlignment="Top"/>    
  30.         <Label Content="Mobile no." HorizontalAlignment="Left" Margin="42,127,0,0" VerticalAlignment="Top"/>    
  31.     
  32.         <TextBox HorizontalAlignment="Left" Height="23" Margin="159,14,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="258"     
  33.                  Validation.ErrorTemplate="{StaticResource validationTemplate}" Style="{StaticResource InputControlErrors}"    
  34.                  Name="txtName">    
  35.             <TextBox.Text>    
  36.                 <Binding Path="UserName" Source="{StaticResource user}" UpdateSourceTrigger="PropertyChanged">    
  37.                     <Binding.ValidationRules>    
  38.                         <c:RequiredFiedValidationRule></c:RequiredFiedValidationRule>    
  39.                     </Binding.ValidationRules>    
  40.                 </Binding>    
  41.             </TextBox.Text>    
  42.                 
  43.         </TextBox>    
  44.             
  45.         <TextBox HorizontalAlignment="Left" Height="23" Margin="159,70,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="258"    
  46.                  Validation.ErrorTemplate="{StaticResource validationTemplate}" Style="{StaticResource InputControlErrors}"    
  47.                  Name="txtAge">    
  48.             <TextBox.Text>    
  49.                 <Binding Path="Age" Source="{StaticResource user}" UpdateSourceTrigger="PropertyChanged">    
  50.                     <Binding.ValidationRules>    
  51.                         <c:RequiredFiedValidationRule></c:RequiredFiedValidationRule>    
  52.                     </Binding.ValidationRules>    
  53.                 </Binding>    
  54.             </TextBox.Text>    
  55.         </TextBox>    
  56.             
  57.         <TextBox HorizontalAlignment="Left" Height="23" Margin="159,130,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="258"    
  58.                  Validation.ErrorTemplate="{StaticResource validationTemplate}" Style="{StaticResource InputControlErrors}"    
  59.                  Name="txtMobileNo">    
  60.             <TextBox.Text>    
  61.                 <Binding Path="MobileNo" Source="{StaticResource user}" UpdateSourceTrigger="PropertyChanged">    
  62.                     <Binding.ValidationRules>    
  63.                         <c:RequiredFiedValidationRule></c:RequiredFiedValidationRule>    
  64.                     </Binding.ValidationRules>    
  65.                 </Binding>    
  66.             </TextBox.Text>    
  67.                 
  68.         </TextBox>    
  69.     
  70.     </Grid>    
  71. </Window>    
If you face any issue regarding this code please feel free to ask me.