Search code examples
c#xamlmvvmvalidationrule

Validation behavior is not doing as expected


Situation :

When you click on new product a popup screen show ups :

enter image description here

As you can see the button "Opslagen" is disabled, that is good because "Productnaam" is mandatory.

Now If I start typing the button "Opslagen" is enabled, so far thats ok.

enter image description here

But when I remove tekst a message in red shows that this field is mandatory, but the button won't disable anymore :

enter image description here

When I type something again the red text dissapears again. But the button behavior is not working as expected.

The XAML :

<TextBox Width="200"
         Height="30"
         HorizontalAlignment="Left"
         VerticalContentAlignment="Center">
    <TextBox.Text>
        <Binding Path="ProductName" Mode="TwoWay" UpdateSourceTrigger="PropertyChanged">
            <Binding.ValidationRules>
                <validators:EmptyValidationRule ValidatesOnTargetUpdated="True" ValidationStep="RawProposedValue" />
            </Binding.ValidationRules>
        </Binding>
    </TextBox.Text>
    <Validation.ErrorTemplate>
        <ControlTemplate>
            <StackPanel>
                <!-- Placeholder for the TextBox itself -->
                <AdornedElementPlaceholder x:Name="textBox"/>
                <TextBlock Text="{Binding [0].ErrorContent}" Foreground="Red"/>
            </StackPanel>
        </ControlTemplate>
    </Validation.ErrorTemplate>
</TextBox>

The EmptyValidationRule class :

public override ValidationResult Validate(object value, CultureInfo cultureInfo)
{
    if (value == null)
    {
        return new ValidationResult(true, null);
    }

    if (!string.IsNullOrEmpty(value.ToString()) && !string.IsNullOrWhiteSpace(value.ToString()))
    {
        return new ValidationResult(true, null);
    }

    return new ValidationResult(false, "Dit veld is verplicht.");
}

And finally the IsSaveButtonDisabled property in the ViewModel :

public bool IsSaveButtonEnabled
{
    get
    {
        if (!string.IsNullOrEmpty(_productName) && !string.IsNullOrWhiteSpace(_productName))
        {
            return true;
        }
        else
        {
            return false;
        }
    }    
}

I really have no idea. It must be the combination of the ValidationRule and the check if the property ProductName is empty.

Edit, button code :

<Button Content="Opslagen"
        IsEnabled="{Binding IsSaveButtonEnabled}"
        Background="Bisque"
        Width="120"
        Height="30"
        Command="{Binding SaveCommand}" />

ProductName property :

private string _productName;
public string ProductName
{
    get => _productName;
    set
    {
        _productName = value;

        RaisePropertyChanged(nameof(ProductName));
        RaisePropertyChanged(nameof(IsSaveButtonEnabled));
    }
}

The Save command is like this :

SaveCommand = new RelayCommand(SaveProduct);

And SaveProduct is just a method that saves the product. This stuff is working.


Solution

  • Set the ValidationStep property to UpdatedValue to run the ValidationRule after the source property has been set:

    <validators:EmptyValidationRule ValidatesOnTargetUpdated="True"
                                    ValidationStep="UpdatedValue" />
    

    Then the PropertyChanged event for the IsSaveButtonEnabled property should be invoked and the Button should be disabled even if the validation rule fails.