How to validate with required verification in text input layout in Xamarin.Forms (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.
|
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>
See also
How to change cursor color in text input layout
How to change error color
How to set the Assistive labels
