How to validate with required verification in .NET MAUI TextInputLayout?

This article demonstrates how to validate user input with required verification using TextInputLayout. The .NET MAUI TextInputLayout control provides an elegant way to enhance the user experience when capturing user input.

The example showcases how to display an error message when an input field is left empty.

Initialize the TextInputlayout control. Inside the TextInputLayout, add an Entry for user input. Attach a DataTrigger to the TextInputLayout’s Triggers collection. DataTrigger is perform dynamic validation and visual indication of errors in user input fields (email and password) within this application. The DataTrigger’s Binding should check the length of the text in the associated Entry. If the length is zero (empty), the DataTrigger’s setters modify the TextInputLayout’s properties to indicate an error.

For both the email and password fields, the HasError property is set to true, visually indicating an error state. Additionally, the ErrorText property is set to the appropriate error messages.

XAML

           <StackLayout    HorizontalOptions="CenterAndExpand"                           
                           Margin="15">
        <inputLayout:SfTextInputLayout Hint="Email" 
                                       x:Name="emailField"                                       
                                       ContainerType="Outlined">
            <inputLayout:SfTextInputLayout.Triggers>
                <DataTrigger TargetType="inputLayout:SfTextInputLayout" 
                             Binding="{Binding Source={x:Reference emailentry},
                             Path=Text.Length}" 
                             Value="0">
                    <Setter Property="HasError" Value="True"/>
                    <Setter Property="ErrorText" Value="Email is empty"/>
                </DataTrigger>
            </inputLayout:SfTextInputLayout.Triggers>
            <Entry x:Name="emailentry" />
        </inputLayout:SfTextInputLayout>
        
        <inputLayout:SfTextInputLayout Hint="Password" 
                                       x:Name="passwordField"                                      
                                       ContainerType="Outlined"
                                       EnablePasswordVisibilityToggle="true">                                                                        
            <inputLayout:SfTextInputLayout.Triggers>
                <DataTrigger TargetType="inputLayout:SfTextInputLayout" 
                             Binding="{Binding Source={x:Reference pwdentry},
                             Path=Text.Length}" 
                             Value="0">
                    <Setter Property="HasError" Value="True"/>
                    <Setter Property="ErrorText" Value="Password is empty"/>
                </DataTrigger>
            </inputLayout:SfTextInputLayout.Triggers>
            <Entry x:Name="passwordentry" />
        </inputLayout:SfTextInputLayout>

      <Button Text="Next" 
              BackgroundColor="Black"
              TextColor="White" 
              WidthRequest="100" 
              HorizontalOptions="Center"/>
    </StackLayout>

Output

Conclusion
Hope you enjoyed learning about how to validate with required verification in the .NET MAUI TextInputLayout.

You can refer to our .NET MAUI TextInputLayout feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI TextInputLayout documentation to understand how to present and manipulate data.

For current customers, you can check out our .NET MAUI components from the License and downloadspage. If you are new to Syncfusion, you can try our 30-day free trial to check out our .NET MAUI TextInputLayout and other .NET MAUI components.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through oursupport forums, Direct - Trac, or feedback portal. We are always happy to assist you!