What is the best approach to validate each field of a formular

Question

Dear all,

I have a formular which is build with quite a lot of different field type. I am looking for an efficient approach to validate each field.

The user control has a Validate button which should be visible only when all fields gets validated.

Of course, I could test like If, and if, and if, and if ... but hell of conditions, I am sure tehre is  amore professionnal way

my user control is define as follow:

<UserControl x:Class="Knauf.Controls.LeadForm"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:props="clr-namespace:KnaufProduct.Properties"
             xmlns:s="http://schemas.microsoft.com/surface/2008"
             xmlns:vm="clr-namespace:KnaufProduct.ViewModel"
             xmlns:SelectorControl="clr-namespace:Microsoft.Garage.Surface.ModeSelector"
             mc:Ignorable="d" 
             DataContext="{Binding Source={StaticResource Locator}, Path=LeadViewModel}"
             Width="700" Height="520"
             Loaded="UserControl_Loaded">
  <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="../Resources/Resources.xaml"/>
                <ResourceDictionary Source="../Resources/KnaufButtons.xaml"/>
                <ResourceDictionary Source="../Resources/KnaufColors.xaml"/>
                <ResourceDictionary Source="../Resources/Selector.xaml" />
            </ResourceDictionary.MergedDictionaries>
       
            <ImageBrush x:Key="LeadFormbackground" Stretch="UniformToFill" ImageSource="/Resources/Images/LeadbackgroundForm.png"/>
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid x:Name="_LayoutRoot" x:FieldModifier="private" Height="Auto" Background="{StaticResource LeadFormbackground}">
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="50"/>
            <RowDefinition Height="50"/>
        </Grid.RowDefinitions>
        <Border x:Name="Header" Grid.Row="0" Background="{StaticResource KnaufGrayBrush}" BorderBrush="DarkGray" BorderThickness="2" CornerRadius="5,5,0,0">
            <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="20,0,0,0">
                <s:SurfaceRadioButton x:Name="Catalog" Foreground="Black"  Grid.Row="0"  Width="Auto" Content="{x:Static props:Resources.HeaderNote}" IsChecked="True"/>
                
            </StackPanel>
        </Border>
        
        <Border  x:Name="Body" Grid.Row="1" BorderBrush="DarkGray" Background="{StaticResource KnaufGrayBrush}" BorderThickness="2" Margin="0,5,0,0" CornerRadius="0,0,10,10">
            <Grid Width="682">
                <Grid.RowDefinitions >
                    <RowDefinition Height="40"/>
                    <RowDefinition Height="40"/>
                    <RowDefinition Height="40"/>
                    <RowDefinition Height="40"/>
                    <RowDefinition Height="40"/>
                    <RowDefinition Height="40"/>
                    <RowDefinition Height="20"/>
                    <RowDefinition Height="40"/>
                    <RowDefinition Height="52"/>
                    <RowDefinition Height="10"/>
                    
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100"/>
                    <ColumnDefinition Width="259*"/>
                    <ColumnDefinition Width="323*"/>
                </Grid.ColumnDefinitions>
                <StackPanel Orientation="Horizontal" Grid.Row="0" VerticalAlignment="Center"  Grid.ColumnSpan="3">
                    <s:SurfaceRadioButton Content="{x:Static props:Resources.Mr}" Foreground="Black" GroupName="Salutation" Margin="15,0,0,0"  IsChecked="True" Checked="SurfaceRadioButton_Checked"/>
                    <s:SurfaceRadioButton Content="{x:Static props:Resources.Mme}" Foreground="Black" GroupName="Salutation" Margin="20,0,0,0" Checked="SurfaceRadioButton_Checked"/>
                    <s:SurfaceRadioButton Content="{x:Static props:Resources.Mss}" Foreground="Black" GroupName="Salutation" Margin="20,0,0,0" Checked="SurfaceRadioButton_Checked"/>
                    
                </StackPanel>
                <TextBlock Text="{x:Static props:Resources.LastName}" Style="{StaticResource DefaultTextBlock}" Grid.Row="1" Grid.Column="0"  Margin="10,0,0,0" VerticalAlignment="Center"/>
                <s:SurfaceTextBox x:Name="_Nom"  Style="{StaticResource DefaultTextBox}" Text="{Binding CurrentLead.LastName, UpdateSourceTrigger=PropertyChanged}" Grid.Row="1" Grid.Column="1" Margin="10,5,10,5" BorderBrush="LightBlue" BorderThickness="2"/>
                <TextBlock Text="{x:Static props:Resources.FirstName}" Style="{StaticResource DefaultTextBlock}" Grid.Row="1" Grid.Column="2" Margin="10,12,223,12" VerticalAlignment="Center" />
                <s:SurfaceTextBox x:Name="_Prenom" Style="{StaticResource DefaultTextBox}" Text="{Binding CurrentLead.FirstName, UpdateSourceTrigger=PropertyChanged}" Grid.Row="1" Grid.Column="2"  Margin="78,5,6,5" BorderBrush="LightBlue" BorderThickness="2"  />
                <TextBlock Text="{x:Static props:Resources.Company}" Style="{StaticResource DefaultTextBlock}" Grid.Row="2" Margin="10,8,0,16" VerticalAlignment="Center"/>
                <s:SurfaceTextBox x:Name="_company" Style="{StaticResource DefaultTextBox}" Text="{Binding CurrentLead.Company, UpdateSourceTrigger=PropertyChanged}" Grid.Row="2"  Grid.Column="1" Margin="10,5,10,5" BorderBrush="LightBlue" BorderThickness="2" />
                <TextBlock Text="{x:Static props:Resources.Role}" Style="{StaticResource DefaultTextBlock}" Grid.Row="2" Grid.Column="2" Margin="10,8,223,16" VerticalAlignment="Center"/>
                <s:SurfaceTextBox x:Name="_role" Style="{StaticResource DefaultTextBox}" Text="{Binding CurrentLead.Role, UpdateSourceTrigger=PropertyChanged}" Grid.Row="2"  Grid.Column="2" Margin="78,5,6,5" BorderBrush="LightBlue" BorderThickness="2"/>
                <TextBlock Text="{x:Static props:Resources.Adress}" Style="{StaticResource DefaultTextBlock}" Grid.Row="3" Margin="10,13,0,11" VerticalAlignment="Center"/>
                <s:SurfaceTextBox x:Name="_adresse1" Style="{StaticResource DefaultTextBox}" Text="{Binding CurrentLead.Adress, UpdateSourceTrigger=PropertyChanged}" Grid.Column="1" Grid.Row="3" Grid.ColumnSpan="2" Margin="10,5,7,5" BorderBrush="LightBlue" BorderThickness="2"/>
                <TextBlock Text="{x:Static props:Resources.Email}" Style="{StaticResource DefaultTextBlock}" Grid.Row="5" Margin="10,14,0,10" VerticalAlignment="Center"/>
                <s:SurfaceTextBox x:Name="_mail"  Style="{StaticResource DefaultTextBox}" Text="{Binding CurrentLead.Email, UpdateSourceTrigger=PropertyChanged}" Grid.Column="1" Grid.Row="5" Margin="10,5,10,5" BorderBrush="LightBlue" BorderThickness="2"/>
                <TextBlock Text="{x:Static props:Resources.Phone}" Style="{StaticResource DefaultTextBlock}" Grid.Column="2" Grid.Row="5" Margin="10,0,0,0" VerticalAlignment="Center"/>
                <s:SurfaceTextBox x:Name="_tel" Style="{StaticResource DefaultTextBox}" Text="{Binding CurrentLead.Phone, UpdateSourceTrigger=PropertyChanged}" Grid.Column="2" Grid.Row="5" Margin="78,5,6,5" BorderBrush="LightBlue" BorderThickness="2"/>
                <TextBlock Text="{x:Static props:Resources.City}" Style="{StaticResource DefaultTextBlock}" Grid.Row="4" Margin="10,0,0,0" VerticalAlignment="Center" Grid.Column="0" />
                <s:SurfaceTextBox x:Name="_City" Style="{StaticResource DefaultTextBox}" Text="{Binding CurrentLead.City, UpdateSourceTrigger=PropertyChanged}" Grid.Column="1" Grid.Row="4" Margin="10,5,10,5" BorderBrush="LightBlue" BorderThickness="2"/>
                <TextBlock Text="{x:Static props:Resources.Zip}" Style="{StaticResource DefaultTextBlock}" Grid.Column="2" Grid.Row="4" Width="Auto" Margin="10,0,0,0" VerticalAlignment="Center"/>
                <s:SurfaceTextBox x:Name="_Zip" Style="{StaticResource DefaultTextBox}" Text="{Binding CurrentLead.ZipCode,UpdateSourceTrigger=PropertyChanged}" Grid.Column="2" Grid.Row="4" Margin="78,5,6,5" BorderBrush="LightBlue" BorderThickness="2"/>
                <TextBlock Text="{x:Static props:Resources.Country}" Style="{StaticResource DefaultTextBlock}" Grid.Row="7" Margin="10,12,169,12" VerticalAlignment="Center" Grid.Column="1" />
                <SelectorControl:ModeSelector x:Name="_countrySelector" x:FieldModifier="private" 
                                      Grid.Column="1" Grid.Row="8" Margin="10,0"
                                      Style="{StaticResource SelectorStyle}"
                                      MaxHeight="200" 
                                      HorizontalContentAlignment="Center"
                                      IsEnabled="True" SnapsToDevicePixels="True"
                                      ItemsSource="{Binding ListOfCountries}" SelectionChanged="_countrySelector_SelectionChanged" />
                <TextBlock  Text="{x:Static props:Resources.Area}" Style="{StaticResource DefaultTextBlock}" Grid.Column="2" Grid.Row="7" Margin="9,12,1,12" VerticalAlignment="Center"/>
                        <SelectorControl:ModeSelector x:Name="_jobSelector" x:FieldModifier="private" 
                                      Grid.Column="2" Grid.Row="8"
                                      Margin="10,0" 
                                      Style="{StaticResource SelectorStyle}"
                                      MaxHeight="200" Width="230" HorizontalAlignment="Right"
                                      HorizontalContentAlignment="Center"
                                      IsEnabled="True" SnapsToDevicePixels="True"
                                      ItemsSource="{Binding ListOfJobs}" SelectionChanged="_jobSelector_SelectionChanged" />
            </Grid>
        </Border>
        <Border  x:Name="Footer" Grid.Row="2" Margin="0,5,0,0">
            <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="20,0,0,0">
                <s:SurfaceCheckBox Content="{x:Static props:Resources.FooterNote}" Click="SurfaceCheckBox_Click" 
                                   IsChecked="{Binding SubscribeToNews, UpdateSourceTrigger=PropertyChanged}"
                                   Foreground="{DynamicResource KnaufBlack}" FontSize="14" FontFamily="{StaticResource HeaderFont}"
                                   Padding="5"/>
            </StackPanel>
        </Border>
        <s:SurfaceButton x:Name="buValidate" Grid.Column="2" Grid.Row="3" 
                                 HorizontalAlignment="Right" Margin="0,0,10,0"  Style="{StaticResource CircleButtonStyle}" Width="40" Height="40" 
                                 Content="{StaticResource Validation}" Background="{StaticResource KnaufCyanBrush}"
                                 HorizontalContentAlignment="Center" 
                                 VerticalContentAlignment="Center"
                                 Foreground="White"
                                 Command="{Binding ValidateCmd}"
                                    />
       
    </Grid>
</UserControl>

Thnaks for your advise and sample

regards

serge

---

Your knowledge is enhanced by that of others.

Answer 1

Hi Serge

It's called WPF Data Validation. This is a huge subject, so the answer is a few good links ;)

http://msdn.microsoft.com/en-us/library/ms753962.aspx

http://msdn.microsoft.com/en-us/magazine/ff714593.aspx

ValidationRule

IErrorInfo

If your button is wired with a Command, then you use the CanExecute handler to decide if the button is enabled or not, it's all built in.

That should be enough to get you started, in answer to your question. This is a huge subject.

 

Regards,
Pete

---

#PEJL

Answer 2

thanks Pete.

---

Your knowledge is enhanced by that of others.