We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to validate with required verification in text input layout in Xamarin.Forms (SfTextInputLayout)

Platform: Xamarin.Forms |
Control: SfTextInputLayout

The SfTextInputLayout is Syncfusion UI component that helps to add the decorative elements such as floating labels, icons, and assistive labels at the top of input views.

When developing applications, a good UX practice involves the application to provide feedback to the user when the input is empty or invalid.

In this article, we are going to highlight the inputview when the user provided input is empty using the HasError and ErrorText properties in TextInputLayout.

The output of the application will be as follows.

 

Validation in TextInputLayout

 

You can highlight the border of TextInputLayout with the different colors using the ErrorColor and also the error message is displayed below the inputview to fill the input field.

Creating the above UI


You can achieve the above UI using the following code sample.

 

[XAML]

<StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Margin="15">
        <inputLayout:SfTextInputLayout Hint="Email" 
                                       x:Name="emailField"
                                       ErrorColor="Red" 
                                       FocusedColor="Blue"
                                       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"
                                       ErrorColor="Red"    
                                       FocusedColor="Blue"
                                       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="pwdentry" />
        </inputLayout:SfTextInputLayout>
 
        <Button Text="Next" BackgroundColor="Black" TextColor="White" 
                WidthRequest="100" HorizontalOptions="Center"/>
    </StackLayout> 

 

View the sample in Github

 

See also

How to change cursor color in text input layout

How to change error color

How to set the Assistive labels

 

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile