Learn how to apply masks to your validation rules on users’ text entries in Xamarin.Forms. The best, and fastest, the way is to use the Plugin.ValidationRules library.

This article uses the Plugin.ValidationRules library to download from the NuGet Gallery here.

This article is part of a small series that I call “Tips and Tricks with Plugin.ValidationRules” where I will teach you how to get the most out of this library so that you do not have headaches doing validations in your forms.

Adding masks

Where to start

If this is the first time you hear about the wonderful library Plugin.ValidationRules I recommend you see all the documentation here.

Formaters and Mask by default

As you know, the Plugin.ValidationRules library makes our lives much easier when it comes to adding validations to users’ data entries but it does not stop there, but we can also format those values from our code without much effort.

TIP: The beauty of this book is that it is designed so that you can reuse code at all times.

Within our Object Validatable<T> we can find a property called ValueFormatter that will serve to format our data.

Let’s look at an example below:

...
            public Validatable<string> Phone { get; set; }
...
            Phone = Validator.Build<string>();
...
            Phone.ValueFormatter = new MaskFormatter("(XXX)XXX-XXXX");
...

In the example we can see our Phoneproperty, within our ViewModel, is being initialized. Once initialized, the formatter that we are going to use is added to the Phone.ValueFormatter property; in our case the default formatter in the MaskFormatter library.

In the same way, we have other formaters:

• StringCaseFormatter: Define which type of letter case you want.
• BoolNegationFormatter: Excellent for denying Boleanos.
• StringNumericFormatter: Useful for validating only numeric text.

MaskFormatter

MaskFormatter was created in order to add masks in a more pleasant and simple way, where we do not need many steps to include it.

With a line of code we can already have our mask added. Another alternative to this is to use behaviors but the process is longer and not all the advantages that the library offers.

The idea of adding a mask in an input field is to make it more human-readable. For example, a phone number may look like +55 555 555 555 or (555) 555-555.

...
      Phone.ValueFormatter = new MaskFormatter("(XXX)XXX-XXXX");
...

MaskFormatter will set the character positions in which each mask character is located. For example, MaskFormatter recognizes the X as a special character. Therefore, a mask of (XXX) XXX-XXX, will mean that spaces, brackets, and dashes will be included as part of the input not typed by the user.

Warning

MaskFormatter will also limit the amount of text you can enter, right down to the mask.

This mask is born from the behavior that is mostly used in the community. You can see it here.

Creating your own mask or formater

Creating a formater is easy and simple. Let’s see it below:

...
    public class MyFormatter : IValueFormatter<string>
    {
        public bool Format(stringvalue)
        {
            // your logic here
            return value;
        }
    }
...

Once the formater is created, we only have to add it to our Validatable<T> property.

...
      MyProperty.ValueFormatter = new MyFormatter();
...

You can see a full example here:

Conclusions

You can see all the code here.

In the same way, I invite you to do these validations without the Plugin.ValidationRules library so that you can notice the difference and how much it helps us.

Nothing enjoy. If you want more tips like these let me know in the comments or on my Twitter, I am being very active there.

Remember that your interactions are what help me know where to direct content. In the end, the idea is to help as much as we can.

I hope you find this video useful. A hug, and until next time.