Xamarin Community Toolkit InputValidation connect with button

Question

I have a simple form where user add email:

                       <Entry Placeholder="Email" Text="{Binding Email}">
                            <Entry.Behaviors>
                                <xct:MultiValidationBehavior >
                                    <xct:EmailValidationBehavior  Flags="ValidateOnUnfocusing"/>
                                </xct:MultiValidationBehavior>
                            </Entry.Behaviors>
                        </Entry>

And have a button:

     <Button Text="Send" Command="{Binding LoadSendRegistrationCommand}" TextColor="#07987f"  BackgroundColor="#eeeeee"  Margin="0,10,0,10"></Button>

When click on button how to check and return message if email is not valid?

Answer 1

There's (as always) multiple ways to do this. If you just want to do this from your code-behind without MVVM/data-binding you still have two options.

Since you're using the MultiValidationBehavior you could give that an x:Name="myValidation" attribute and access that from your code-behind. You will then be able to do:

1. Through MultivalidationBehavior

if (!myValidation.IsValid)
{
    // Somehow show the errors, this needs some extra code, but you get the idea :)
    DisplayAlert("Error", myValidation.Errors, "OK");
}

Additionally you probably want to specify the MultivalidationBehavior.Error property on the EmailValidationBehavior, i.e.:

<xct:EmailValidationBehavior xct:MultiValidationBehavior.Error="Email not valid" Flags="ValidateOnUnfocusing"/>

2. Through EmailValidationBehavior

You can also do it with the EmailValidationBehavior directly. For this add an x:Name="myEmailValidation" attribute to your EmailValidationBehavior and you can access it in your code-behind:

if (!myEmailValidation.IsValid)
{
    DisplayAlert("Error", "Email not valid", "OK");
}
else
{
    DisplayAlert("Success", "All valid!", "OK");
}

3. Through data-binding

I actually noticed while typing all this that you did use data-binding with the Command for that button and the value of the email. In that case, you can also bind to the IsValid property on either the EmailValidationBehavior or MultiValidationBehavior and then toggle some UI element to visible or not depending on that.

For this we need to do a couple of things. I will focus on the EmailValidationBehavior, I trust that you can figure it out for the MultiValidationBehavior one.

1. Add the binding to your EmailValidationBehavior: <xct:EmailValidationBehavior IsValid="{Binding EmailValid}" Flags="ValidateOnUnfocusing"/>

2. Add a backing property to the object that is in your BindingContext:

private bool emailValid;

public bool EmailValid
{
    get => emailValid;
    set
    {
        emailValid = value;
        OnPropertyChanged();
     }
}

3. Add the UI element to indicate to the user. Of course, this could also be disabling a button or something. <Label Text="Email not valid" TextColor="Red" IsVisible="{Binding EmailValid, Converter={StaticResource invertBoolConverter}}" />

Notice that I need to also use the InvertedBoolConverter from the Toolkit to invert the value from IsValid to work with it correctly with IsVisible of the Label

4. Add the converter

<ContentPage.Resources>
    <ResourceDictionary>
        <xct:InvertedBoolConverter x:Key="invertBoolConverter" />
    </ResourceDictionary>
</ContentPage.Resources>

That should be it :)

Working sample with all this code can be found here: https://github.com/jfversluis/XCTInputValidationCodeBehindSample