1. Home
  2. Forum
  3. Xamarin.Forms
  4. SfTextInputLayout isRequired validation?

SfTextInputLayout isRequired validation?

Hi,
How can I quickly do isRequired field verification in sftextinputlayout.
Do you have such a feature? or will it come?
Thank you.

5 Replies
HM Hemalatha Marikumar Syncfusion Team June 4, 2020 08:30 AM UTC

Hi Tayyip Emre ÖRNEK, 
 
Greetings from Syncfusion. 
 
Your requirement has been achieved by using ErrorText with HasError properties. We have prepared the demo sample to show the required field update when there is have an empty text in Entry inside the SfTextInputLayout and customizing its color by using ErrorColor as per in below code snippet 
 
<inputLayout:SfTextInputLayout 
                Hint="Name" ErrorColor="Red"  
                EnablePasswordVisibilityToggle="true"> 
                <inputLayout:SfTextInputLayout.Triggers> 
                    <DataTrigger TargetType="inputLayout:SfTextInputLayout" 
                                 Binding="{Binding Source={x:Reference entry},Path=Text.Length}" 
                                 Value="0"> 
                        <Setter Property="ErrorText" Value="*Required" /> 
                        <Setter Property="HasError" Value="True"/> 
                    </DataTrigger> 
                </inputLayout:SfTextInputLayout.Triggers> 
                    <Entry Text="John" x:Name="entry" />    
            </inputLayout:SfTextInputLayout> 
 
 
To know more about this, please refer below UG documents 
 
Regards,
Hemalatha M. 
 


TE Tayyip Emre ÖRNEK replied to Hemalatha Marikumar June 4, 2020 10:17 PM UTC

Hi Tayyip Emre ÖRNEK, 
 
Greetings from Syncfusion. 
 
Your requirement has been achieved by using ErrorText with HasError properties. We have prepared the demo sample to show the required field update when there is have an empty text in Entry inside the SfTextInputLayout and customizing its color by using ErrorColor as per in below code snippet 
 
<inputLayout:SfTextInputLayout 
                Hint="Name" ErrorColor="Red"  
                EnablePasswordVisibilityToggle="true"> 
                <inputLayout:SfTextInputLayout.Triggers> 
                    <DataTrigger TargetType="inputLayout:SfTextInputLayout" 
                                 Binding="{Binding Source={x:Reference entry},Path=Text.Length}" 
                                 Value="0"> 
                        <Setter Property="ErrorText" Value="*Required" /> 
                        <Setter Property="HasError" Value="True"/> 
                    </DataTrigger> 
                </inputLayout:SfTextInputLayout.Triggers> 
                    <Entry Text="John" x:Name="entry" />    
            </inputLayout:SfTextInputLayout> 
 
 
To know more about this, please refer below UG documents 
 
Regards,
Hemalatha M. 
 


Thank you for quick answer.

How can I do this code behind cs? Coukd you please update the code for me?

HM Hemalatha Marikumar Syncfusion Team June 5, 2020 07:20 AM UTC

Hi Tayyip Emre ÖRNEK, 
 
Thanks for your update. 
 
Please find the c# code of the same implementation in below 
 
StackLayout stackLayout = new StackLayout(); 
            Entry entry = new Entry() { Text = "John" }; 
            SfTextInputLayout sfTextInputLayout = new SfTextInputLayout() 
            { 
                ErrorColor = Color.Red, 
                Hint = "Name", 
                InputView = entry, 
                EnablePasswordVisibilityToggle = true, 
                Triggers = 
                { 
                    new DataTrigger(typeof(SfTextInputLayout)) 
                    { 
                        Binding = new Binding() 
                        { 
                            Source = entry, 
                            Path = "Text.Length" 
                        }, 
                        Value = 0, 
                        Setters = 
                        { 
                            new Setter(){Property = SfTextInputLayout.ErrorTextProperty,Value = "*Required"}, 
                            new Setter(){Property = SfTextInputLayout.HasErrorProperty,Value = true}, 
                        } 
                    } 
                }, 
            }; 
            stackLayout.Children.Add(sfTextInputLayout); 
            this.Content = stackLayout; 
 
Please let us know if you need any further assistance. 
 
Regards,
Hemalatha M. 


TE Tayyip Emre ÖRNEK replied to Hemalatha Marikumar June 5, 2020 06:54 PM UTC

Hi Tayyip Emre ÖRNEK, 
 
Thanks for your update. 
 
Please find the c# code of the same implementation in below 
 
StackLayout stackLayout = new StackLayout(); 
            Entry entry = new Entry() { Text = "John" }; 
            SfTextInputLayout sfTextInputLayout = new SfTextInputLayout() 
            { 
                ErrorColor = Color.Red, 
                Hint = "Name", 
                InputView = entry, 
                EnablePasswordVisibilityToggle = true, 
                Triggers = 
                { 
                    new DataTrigger(typeof(SfTextInputLayout)) 
                    { 
                        Binding = new Binding() 
                        { 
                            Source = entry, 
                            Path = "Text.Length" 
                        }, 
                        Value = 0, 
                        Setters = 
                        { 
                            new Setter(){Property = SfTextInputLayout.ErrorTextProperty,Value = "*Required"}, 
                            new Setter(){Property = SfTextInputLayout.HasErrorProperty,Value = true}, 
                        } 
                    } 
                }, 
            }; 
            stackLayout.Children.Add(sfTextInputLayout); 
            this.Content = stackLayout; 
 
Please let us know if you need any further assistance. 
 
Regards,
Hemalatha M. 


Thank you.

How can I handler method for this. If required fields are empty show Display Alert?

HM Hemalatha Marikumar Syncfusion Team June 8, 2020 07:44 AM UTC

Hi Tayyip Emre ÖRNEK, 
 
Thanks for your update.  
 
Yes. You can show the popup based on the validation of Entry text by using Converter as per in below code snippet 
 
SfTextInputLayout sfTextInputLayout = new SfTextInputLayout() 
            { 
                ErrorColor = Color.Red, 
                Hint = "Name", 
                InputView = entry, 
                EnablePasswordVisibilityToggle = true, 
                Triggers = 
                { 
                    new DataTrigger(typeof(SfTextInputLayout)) 
                    { 
                        Binding = new Binding() 
                        { 
                            Source = entry, 
                            Path = "Text.Length", 
                            Converter = new TextToPopup(), 
                            ConverterParameter = this 
                        }, 
                        Value = 0, 
                        Setters = 
                        { 
                            new Setter(){Property = SfTextInputLayout.ErrorTextProperty,Value = "*Required"}, 
                            new Setter(){Property = SfTextInputLayout.HasErrorProperty,Value = true}, 
                        } 
                    } 
                }, 
            }; 
 
I have maintained one CLR property to hold the result from Converter and based on that bool CLR property, I have displayed the alert message for my use case. 
 
private bool isShow; 
 
        public bool IsShow 
        { 
            get { return isShow; } 
            set 
            { 
                isShow = value; 
 
                if(IsShow) 
                { 
                    DisplayAlert("Error", "Please enter valid name", "OK"); 
                } 
 
                OnPropertyChanged("IsShow"); 
            } 
        } 
 
.. 
 
public class TextToPopup : IValueConverter 
    { 
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
        { 
            if(parameter is MainPage) 
            { 
                MainPage page = parameter as MainPage; 
                page.IsShow = (int)value == 0; 
            } 
 
            return value; 
        } 
 
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
        { 
            throw new NotImplementedException(); 
        } 
    } 
 
 
 
Regards,
Hemalatha M. 


Loader.
Up arrow icon