Top

Input Validation Approach for Windows 10 UAP, Android and iOS

Input Validation Approach for Windows 10 UAP, Android and iOS

You have probably faced the problem of validating input fields in your app forms. As you may know, each platform provides different tools to validate text, time and other type of entries. What happens if we need a common solution for our favorite target platforms: Windows 10 UAP, Android and iOS?

As DRY principle lovers, we always think about reusing as many code artifacts as possible. The ideal solution would be one compatible for all these platforms. When working with Xamarin and thinking of code reusing, the pattern that comes to mind is MVVM: a pattern that has been always related with many .NET technologies.

Our experience with .NET Framework technologies linked with MVVM like WPF or Silverlight, which provided some built-in validation from INotifyDataErrorInfo interface, makes us think on solving validation for UAP first. With UAP we can take advantage of the power of XAML and data bindings, and think on a solution we can adapt somehow to Android and iOS. After a small research about validation engine provided by UAP platform, we found this great article by Jerry Nixon, that we recommend as a very interesting read.

Shared validation classes

It seems that we need to create some custom validation classes, so we can work in our own solution with Jerry’s approach as source of inspiration. Our solution is very similar, but includes some customization and simplifications to better adapt to the scope of the article.

Main validation classes and interfaces are:

  • ValidationRule: we can extend this abstract class to create as many custom rules as we need. In our sample we just created some simple required and length rules for text fields.
  • ValidableProperty: let us define some properties with related validation rules in our view models.
  • IValidableModel: to make our view models to be accept work with validation rules evaluation, we just need to implement this interface.

Sample code can be found here.

UAP implementation

With all validation infrastructure provided by shared classes, we can just start with our next goal: create a sample validation form for Windows 10 UAP.

xamarin.validationsAs we are going to build a form that validates the name of a user, our first mission is to create a custom text box control that provides some validation feedback. If user introduces an invalid value, a red message should appear.

 

For UAP, an easy approach is to extend core Textbox, creating a new class called ValidationTextBox, and modifying its control template to add a custom red TextBlock bound to property first error message.

[code language=”xml”]

[/code]

Then, just need to add our view model as page data context, and define necessary bindings to make errors appear at the same time that user enters text, and enable or disable form submit button when view models IsValid property changes its value.

[code language=”xml”]







[/code]

Android implementation

Our next target platform will be Android. In this case, thanks to the widget TextInputLayout provided in Android Support library, we already have a baked-in text input that provides an easy way to show some related validation errors.

So, just need to create the layout and subscribe to FocusChange and TextChanged in order to call property validation method. Other interesting subscription is the one related with view model PropertyChanged. In this case, we can use the property to enable or disable submit button.

[code language=”csharp”]
public class MainActivity : Activity
{
private readonly MainViewModel viewModel;
private TextInputLayout nameEditInput;
private Button submitButton;

public MainActivity()
{
this.viewModel = new MainViewModel();
this.viewModel.PropertyChanged += this.ViewModelPropertyChanged;
}

protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);

// Set our view from the “main” layout resource
SetContentView(Resource.Layout.Main);

this.InitializeViews();
}

private void InitializeViews()
{
var contentView = this.FindViewById(Resource.Id.main);

this.nameEditInput = contentView.FindViewById(Resource.Id.main_form_name_input);
this.nameEditInput.EditText.FocusChange += this.NameFocusChange;
this.nameEditInput.EditText.TextChanged += this.NameTextChanged;

this.submitButton = contentView.FindViewById

Sergio Escalada
No Comments

Post a Comment