MAUI: how to validate an entry field to be non empty and a valid e-mail

Question

I have an entry field that I need to validate to be non empty and a valid e-mail.

I used MAUI toolkit behaviors this way:

        <Entry x:Name="Email" MaxLength="50" Placeholder="Correo electrónico">
            <Entry.Behaviors>
                <toolkit:MultiValidationBehavior 
                    InvalidStyle="{StaticResource InvalidEntryStyle}"  
                    ValidStyle="{StaticResource ValidEntryStyle}"
                    Flags="ValidateOnValueChanged">

                    <toolkit:EmailValidationBehavior 
                            DecorationFlags="Trim,NullToEmpty"
                            Flags="ValidateOnValueChanged" 
                            MinimumLength="1"
                            MaximumLength="50"
                            toolkit:MultiValidationBehavior.Error="Debes ingresar el correo electrónico de forma correcta."  />
                </toolkit:MultiValidationBehavior>
            </Entry.Behaviors>
        </Entry>

The problem if nothing is entered in the field, Email.Text is null (even when I placed NullToEmpty decoration flag). In that case, the validation is successful.

when I add a character and then delete it, Email.Text is empty and the validation failed.

How can I handle this?

if none of the existing behaviors correctly handle null values, you could create your own. Or you could try initializing the field to `String.Empty` instead of `null` — Jason, Jun 21 '23 at 21:27
I did that, but since this a common task, I am wondering why the toolkit does not handle it. — jstuardo, Jun 21 '23 at 21:36
choice 3, fix the behavior to correctly handle nulls and submit a PR to the repo — Jason, Jun 21 '23 at 21:37

Liqun Shen-MSFT · Answer 1 · 2023-06-22T09:23:03.907

You could use ObservableValidator from CommunityToolkit.Mvvm package. I made an easy demo.

This is the MainPageViewModel:

public partial class MainPageViewModel : ObservableValidator
{
    //[Required] attribute means it shouldn't be null
    //[EmailAddress] that's for email format

    [ObservableProperty]
    [Required]
    [EmailAddress]
    private string email;


    public MainPageViewModel()
    {
        Validate();
    }


    [RelayCommand]
    void Validate()
    {
        ValidateAllProperties();
    }
}

For page, like the following:

<Entry x:Name="email" Text="{Binding Email,Mode=TwoWay}"
   ClearButtonVisibility="WhileEditing">
    <Entry.Behaviors>
        <toolkit:EventToCommandBehavior
            EventName="TextChanged"
            Command="{Binding ValidateCommand}" />
    </Entry.Behaviors>
            <Entry.Triggers>
                <DataTrigger TargetType="Entry"
                         Binding="{Binding HasErrors}"
                         Value="true">
                    <Setter Property="TextColor" Value="Red" />
                </DataTrigger>
                <DataTrigger TargetType="Entry"
                         Binding="{Binding HasErrors}"
                         Value="false">
                    <Setter Property="TextColor" Value="Black" />
                </DataTrigger>
            </Entry.Triggers>
</Entry>

So when the email text is not valid, the background color of entry would be red.

Also you could define your own attributes. For example, if you want to validate if the text of entry contains a space, you could define a NonSpace attribute:

public sealed class NonSpaceAttribute : ValidationAttribute
{
    public NonSpaceAttribute()
    {
    }

    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        var str = value as string;
        int num = str.IndexOf(" ");

        if(num == -1)
        {
            return ValidationResult.Success;
        }
               
        return new("The current value includes space");
    }
}

Then just consume it:

    [ObservableProperty]
    [NonSpace]
    [EmailAddress]    
    private string email;

Hope it helps!

MAUI: how to validate an entry field to be non empty and a valid e-mail

1 Answers1