Implementing masked input in MVC4

In any application, whether it be web or desktop application, the user needs to conform to a set format or template while entering the data into a form. This is solely done for the purpose of data integrity. This is where the concept of “masked input” comes in. As per Wikipedia, “an input mask refers to a string expression, defined by a developer, that governs what a user is allowed to enter in as input in a text box.” Some of the frequently used input for masking include Date, Time, Phone, SSN, Product Key , Zip codes, Postal codes and so forth as shown here.

One method of easily implementing masked input is by using jquery. However, it has a serious drawback that we have to link jquery function for each input that we need to mask. There are a couple of good plugins available for this but all pose the same issue.

Another workaround is to create a data annotation for masking input and using it in our views or viewModels. The intent of this post is to walk-through this alternative approach.

Continue reading