I am using an SfTextInputLayout and I want to Validate user input specifically making sure they enter a Valid Social Security Number

Question

I am using an SfTextInputLayout and I want to Validate user input in the Entry specifically making sure they enter a Valid Social Security Number. I understand there are many different ways to do this, but I would prefer the most straightforward approach as I am just learning how to do Input Control Validation. Thanks !

Hariharan Chokkalingam · Accepted Answer

Hi Ron Rex,Thank you for your update. Based on your response, we have created an updated sample with a custom SsnValidationBehavior using TextValidationBehavior from the .NET MAUI Community Toolkit, with ErrorMessage and HasError properties. We have bound these properties to the respective HasError and ErrorText properties of SfTexInputLayout. Please refer to the attached sample and code snippets below for more details. // Xamal // Code Behind //TextValidationBehavior public class SsnValidationBehavior : TextValidationBehavior, INotifyPropertyChanged { private string? _errorMessage; private bool _hasError; public string ErrorMessage { get { return _errorMessage; } set { if (_errorMessage != value) { _errorMessage = value; OnPropertyChanged(); } } } public bool HasError { get { return _hasError; } set { if (_hasError != value) { _hasError = value; OnPropertyChanged(); } } } public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } protected override ValueTask ValidateAsync(object? value, CancellationToken token) { var text = value as string; if (string.IsNullOrWhiteSpace(text)) return new ValueTask(false); var regex = new Regex(@"^\d{3}-\d{2}-\d{4}$"); if (regex.IsMatch(text)) { HasError = false; } else { HasError = true; } if (HasError) { ErrorMessage = "SSN is Invalid"; } return new ValueTask(regex.IsMatch(text)); } } Please let us know if the provided solution helps resolve your query. Don’t hesitate to contact us if you have any concerns or further questions. Regards,Hariharan C.Attachment: TextInputLayoutMaui_f44c3b24.zip

Hariharan Chokkalingam · Answer

Hi Ron Rex,Thank you for reaching out to us. We have investigated your query based on your update. We would like to inform you that TextInputLayout is a container control designed to hold input controls. Based on your requirements, we have created a TextInputLayout sample. In this sample, we used an Entry inside the TextInputLayout and performed validation for the social security number using the TextChanged event. Please refer to the code snippet below for this approach. // Xaml // Code behind private void Entry_TextChanged(object sender, TextChangedEventArgs e) { if (sender is Entry entry && entry != null) { string newText = e.NewTextValue; // Remove any non-numeric characters newText = new string(newText.Where(char.IsDigit).ToArray()); // Format as SSN (###-##-####) if (newText.Length > 3) { newText = newText.Insert(3, "-"); } if (newText.Length > 6) { newText = newText.Insert(6, "-"); } if (newText.Length > 11) { newText = newText.Substring(0, 11); entry.Text = newText; } // Validate SSN if (newText.Length == 11 && newText[3] == '-' && newText[6] == '-' || entry.Text.Length == 0) { textInputlayout.HasError = false; } else { textInputlayout.HasError = true; textInputlayout.ErrorText = "SSN is invalid"; } } } For your convenience, we have attached the sample. Kindly review it and let us know if you have any concerns. If the provided solution does not meet your requirements, please provide further details. Please don’t hesitate to contact us if you have any queries.Regards,Hariharan C.Attachment: TextInputLayoutMaui_381dd114.zip

Ron Rex · Answer

Thanks for the working example. If its possible I would prefer not to use any code behind. I was wondering whats the best practice for doing this in the viewmodel or the xaml. Or even better It is my understanding that the .Net Maui Community toolkit has a  TextValidationBehavior to validate user input. I just want to make sure I am using best practices. Thanks !

Ron Rex · Answer

Thanks for the great example, it fits my requirements perfectly. But I have another question concerning the fact that I am using the MVVM pattern and I want my model properties to be bound to the view control(s). In this example I would bind the SSN number to the EntryValidationBehaviour Entry control. However, I dont see my bound property.

Hariharan Chokkalingam · Answer

Hi Ron Rex,We are glad that the provided response meets your requirement. Now, we have reviewed the new query the Entry text binding is not updated from our side. To meet your requirement we have updated the sample by creating a new CompanyInfo ViewModel with an Ssn property. We then created a CompanyInfo property in our SsnValidationBehavior ViewModel and bound the property to the Entry.Please refer to the updated sample and code snippets below for more details: // XAML //CompanyInfo View model public class CompanyInfo : INotifyPropertyChanged { private string _spouseSsn = "111-22-3333"; public string SpouseSsn { get { return _spouseSsn; } set { if (_spouseSsn != value) { _spouseSsn = value; OnPropertyChanged(); } } } public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } } //SsnValidationBehavior ViewModel .. // other code private CompanyInfo _companyInfo; // Constructor public SsnValidationBehavior() { // Initialize CompanyInfo _companyInfo = new CompanyInfo(); } public CompanyInfo CompanyInfo { get { return _companyInfo; } set { if (_companyInfo != value) { _companyInfo = value; OnPropertyChanged(); } } } .. // other code Please let us know whether the provided suggestion helps to resolve your query. Don’t hesitate to contact us if you have any concerns or queries.Regards,Hariharan C.Attachment: TextInputLayoutMaui_Updated_483f29c1.zip