Howto: Effectively using the data inputmask attribute

The data-inputmask attribute is an easy and powerfull way to apply a mask on an inputfield. However with the data attributes and the unobtrusive movement I see some devs putting everything into the data-attribute. You see inputfields and tablefields with a full page of options and javascript all put into the data-attribute. This is not exactly wat I call unobtrusive!!

In my opinion you have to keep the data-attribute usage small and certainly not containing logic.

In the context of the inputmask I advice to use the data-inputmask attribute in combination of custom aliases.

data-inputmask & aliases combination

Instead of putting too many options into the data-inputmask attribute we define a custom alias. Into the custom alias we define the mask and required options

Inputmask.extendAliases({
  'customAlias': {
    autoUnmask: true,
    mask: "999-999-999",
    oncomplete: function() {
     // do something
    },
    onincomplete: function() {
     // do something
    }
  }
});

Into the html

<input type="text" data-inputmask="'alias': 'customAlias'" />