Custom validator

Hi

I created a validator for checking if a value is a correct IBAN. I am trying to follow the pattern explained here:
https://help.syncfusion.com/wpf/maskedtextbox/validation

My validator makes use of a nuget package IbanNet. This is what the validator looks like.

    public class SfMaskedEditIBANValidator : ValidationRule
    {
        public override System.Windows.Controls.ValidationResult Validate(object value, CultureInfo cultureInfo)
        {
            IIbanValidator _ibanValidator = new IbanValidator();

            IbanNet.ValidationResult result = _ibanValidator.Validate(value.ToString());

            System.Windows.Controls.ValidationResult output = new(result.IsValid, result.Error);

            return output;
        }
    }

I added the correct namespace of the validator to my xaml document. The example suggest that I need to define in xaml:
<Trigger Property="ValidationMode" Value="KeyPress">
    <Setter Property="Text">
        <Setter.Value>
            <Binding Path="Value" Mode="TwoWay" UpdateSourceTrigger="PropertyChanged">
                <Binding.ValidationRules>
                    <local:NameValidator/>
                </Binding.ValidationRules>
            </Binding>
        </Setter.Value>
    </Setter>
</Trigger>

So I have tried the following (see below). Not that I had to place this code inside  <Style TargetType="sf:SfMaskedEdit"> <Style.Triggers>, otherwise I could not place
<Trigger Property="ValidationMode" Value="KeyPress"> on the control.

My
SfMaskedEditIBANValidator is not executed when I enter an IBAN value in the maskededit control. I am unsure what I am doing wrong.

Any help would be appreciated.

Kind regards,

Niels van Strien


                <sf:SfTextInputLayout
                x:Name="BankAccountNumber"
                Grid.Row="9"
                Grid.Column="3"
                Margin="0 0 0 0"
                Hint="IBAN nummer">

                    <sf:SfMaskedEdit
                    x:Name="IBANME"
                        Foreground="{Binding ElementName=BankAccountNumber, Path=Foreground, Mode=TwoWay}"
                        Mask=">LL00 >LLLL 0000 0000 00"
                        MaskType="Simple"
                        Value="{Binding Path=IBAN, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                        ErrorBorderBrush="Red"
                        ValidationMode="KeyPress">
                        <sf:SfMaskedEdit.Style>
                            <Style TargetType="sf:SfMaskedEdit">
                                <Style.Triggers>
                                    <Trigger Property="ValidationMode" Value="KeyPress">
                                        <Setter Property="Text">
                                            <Setter.Value>
                                                <Binding Path="Value" Mode="TwoWay" UpdateSourceTrigger="PropertyChanged">
                                                    <Binding.ValidationRules>
                                                        <validators:SfMaskedEditIBANValidator/>
                                                    </Binding.ValidationRules>
                                                </Binding>
                                            </Setter.Value>
                                        </Setter>
                                    </Trigger>
                                </Style.Triggers>
                            </Style>
                        </sf:SfMaskedEdit.Style>
                    </sf:SfMaskedEdit>
                </sf:SfTextInputLayout>

5 Replies 1 reply marked as answer

SG Sangeetha Ganesan Syncfusion Team May 25, 2021 02:37 PM UTC

Hi NM van Strien,  
 
Thanks for contacting Syncfusion support.  
 
We have checked your query and code about “SfMaskedEditIBANValidator is not executed when I enter an IBAN value in the maskededit control” and in that you have missed the binding source in Binding . Please refer the below code example,  
 
<Trigger Property="ValidationMode" Value="KeyPress"> 
      <Setter Property="Text"> 
          <Setter.Value> 
              <Binding RelativeSource="{RelativeSource Self}" Path="Value" Mode="TwoWay" UpdateSourceTrigger="PropertyChanged"> 
                 <Binding.ValidationRules> 
                     <local:SfMaskedEditIBANValidator/> 
                 </Binding.ValidationRules> 
              </Binding> 
          </Setter.Value> 
      </Setter> 
</Trigger> 
 
 
We have created the sample on following your replication procedure. Please get the sample from below location,  
 
 
If we have misunderstood your query please get back to us with more details. This would help us to provide solution at earliest.  
 
Regards,  
Sangeetha G 



NV NM van Strien May 25, 2021 08:00 PM UTC

Hi Sangeetha,

Thank you for helping me. Your solution brings me forward, but I am not entirely where I want to be yet. I have tried to get it to work myself, but still get stuck.

When running your demo, typing in a valid IBAN bank account number will result in a stack overflow.To test, you can generate a random IBAN number to validate the validationresult here: http://randomiban.com/?country=Netherlands

One example is NL18RABO8681965719

I added a textbox example to your demo too. Similar to the textbox validation error, I want to change the borderbrush of the SfTextInputLayout control containing the SfMaskedEdit control to red when the validationresult is IsValid=false

I hope that I was able to describe my goal clearer now. Any help is greatly appreciated.

Kind regards,

Niels



Attachment: SfMaskedEdit_F165690206508039_nvs_889bae56.7z


SG Sangeetha Ganesan Syncfusion Team May 26, 2021 03:47 PM UTC

Hi NM van Strien,  
 
Thanks for your update. 
 
We have checked your query” Change the borderbrush of the SfTextInputLayout control containing the SfMaskedEdit control to red” from our end. We have modified the sample based on your requirement. Please get the sample from below location,  
 

ScreenShot :

 
If we have misunderstood your query please get back to us with more details. This would help us to provide solution at earliest.  
 
Regards,  
Sangeetha G 


Marked as answer

NV NM van Strien May 26, 2021 08:22 PM UTC

Hi Sangeetha,

I did manage to get it to work now. Thank you!

Your sample made me realize that the MVVM approach is somewhat different.

On the ViewModel I can have a boolean property "IbanHasError" and bind that to the "HasError" property of the SfTextInputLayout in the xaml View. The validator gets called from the ViewModel when the value in the SfMaskedEdit control changes. Every time the user types a new charachter, the validator checks the total input and sets the IbanHasError property accordingly.

Perhaps it could be useful to add this information to the https://help.syncfusion.com/wpf/maskedtextbox/validation page.

Your solution helped me resolve my question though. So thank you again.

Kind regards,

Niels van Strien




SG Sangeetha Ganesan Syncfusion Team May 27, 2021 01:01 PM UTC

Hi NM van Strien,   
  
Thanks for your update. 
 
We are glad to know that the reported issue has been resolved at your end we will include it in our Knowledge Base. Please let us know if you need any further assistance on this. We are always happy to help you. 
 
Regards,  
Sangeetha G 


Loader.
Up arrow icon