Form validation disable submit button until all fields are filled in WPF

Question

Given: WPF 4.0 desktop-based application. Basic input form with two TextBox fields and submit button.

XAML-code:

<Label Content="Username" />
    <TextBox x:Name="Form_UserName" />

<Label Content="Password" />
    <TextBox x:Name="Form_Password" />

<Button x:Name="Submit"
    Click="Form_Submit_Button_Click"
    Content="Submit" />

Task: Implement logic where submit button is enabled if and only if two TextBox fields are filled.

The classical way to solve this issue is a use of event handlers such as onLostFocus() or something like that, where we can control condition of this fields every time when user switch focus from the field.

But since my project is WPF-based, I prefer to use a native way to work with forms — data binding mechanism. I read some articles from this site and MSDN too about form validation, but in almost all examples is proposed to use MVVM framework and I would like to implement it without any framework.

Also, I tried to play with IMultiValueConverter but no worked result is received.

Please, point me to (code) suggestion how to solve this problem with data binding as simple as possible (I'm only starting with WPF).

Answer 1

This can be easily done using the WPF validation mechanisms. First since you want to follow the WPF architecture I would reccomend you to use the WPF Command model.

Now to implement your functionality, you can add a CommandBinding to the Window/UserControl or to the Button itself:

<Button Content="Save" Command="Save">

<Button.CommandBindings>
    <CommandBinding Command="Save" 
                    Executed="Save_Executed" CanExecute="Save_CanExecute" />
    </Button.CommandBindings>
</Button>

Now you can subscribe to the CanExecute event to enable or disable your button based on your validation logic. I recommend these reads before you continue:

Validation in Windows Presentation Foundation

Using Custom Validation Rules in WPF

The simplest way to do your requirement is as given below:

XAML

<Window x:Class="GridScroll.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:GridScroll"
    Title="Window1" Height="300" Width="300">

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="200"/>
    </Grid.ColumnDefinitions>

    <TextBlock Text="User Name" Grid.Column="0" Grid.Row="0"/>
    <TextBox Grid.Column="1" Grid.Row="0" Text="{Binding Path=UserName,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>
    <TextBlock Text="Password" Grid.Column="0" Grid.Row="1"/>
    <TextBox Grid.Column="1" Grid.Row="1" Text="{Binding Path=Password,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>

    <Button Content="Save" Grid.Row="2" Grid.ColumnSpan="2" Width="100" HorizontalAlignment="Right" Command="Save">
        <Button.CommandBindings>
            <CommandBinding Command="Save" 
                    Executed="Save_Executed" CanExecute="Save_CanExecute"/>
        </Button.CommandBindings>

    </Button>
</Grid>

Code behind

public partial class Window1 : Window,INotifyPropertyChanged
{
    public Window1()
    {
        InitializeComponent();
        DataContext = this;
    }

    private string userName;
    public string Username
    {
        get
        {
            return userName;
        }
        set
        {
            userName = value;
            OnPropertyChanged("UserName");
        }
    }

    private string password;
    public string Password
    {
        get
        {
            return password;
        }
        set
        {
            password = value;
            OnPropertyChanged("Password");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    public void OnPropertyChanged(string name)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(name));
        }
    }

    private void Save_Executed(object sender, ExecutedRoutedEventArgs e)
    {
        //Your code
    }

    private void Save_CanExecute(object sender, CanExecuteRoutedEventArgs e)
    {
        e.CanExecute = !(string.IsNullOrEmpty(Username) && string.IsNullOrEmpty(Password));

    }
}

Hope this helps.