The format of the masked input is fully defined by the "Transform" it uses.
A Transform is a client-side JavaScript object containing just three functions:
- validate – A function that takes a look at what the user just typed into the masked input box, and returns a boolean value: true if text is valid, false if it isn't.
For example, if the transform is used to accept a Visa card number, and the user types in "4506/00020002-0002", this function returns true. (It just makes sure that there are exactly 16 digits.) If the user types in "2008-10-14", the function returns false. - unmask – A function that takes a look at what the user has just typed into the input box, and "unmasks" it. Typically, this means that the text is cleaned of formatting, leaving behind just the raw data. Unmask gets called even when validate does not return true, so it should not assume that the masked text it is working on is valid.
In our example, if the user typed in "4506/00020002-0002", this function will return "4506000200020002". - mask – A function that takes a look at the raw, clean data, and "masks" it: formats it for display.
With our raw data being "4506000200020002", this function will return "4506 0002 0002 0002".
Each of these methods takes only one argument: the reference to the client-side MaskedInput JavaScript object. The function can then easily use this object to get any other information it needs. For example, here is the entire code of the Visa card transform:
'CreditCard_VisaMasterCard':
{
'validate': function(maskedInput)
{
// Ensure the unmasked edited text has exactly 16 digits:
return this.unmask(maskedInput).length === 16;
},
'unmask': function(maskedInput)
{
// Simply remove all the non-digits from the displayed text:
return maskedInput.masked.value.replace(/[^\d]/g, '');
},
'mask': function(maskedInput)
{
// Insert spaces between four-digit groups:
return maskedInput.unmasked.value.replace(/^(\d{4})(\d{4})(\d{4})(\d{4})$/, '$1 $2 $3 $4');
}
}Two often used properties of the client-side MaskedInput object are maskedInput.masked and maskedInput.unmasked:
- maskedInput.masked refers to the display textbox element that the user sees and edits. It contains the masked text.
Although the masked text is typically not examined on the server, it can be accessed as MaskedInput's DisplayText property. - maskedInput.unmasked refers to a hidden input that contains the unmasked text.
The unmasked text is often examined or manipulated on the server, where it can be accessed as MaskedInput's Text property.
Hopefully it is now clear how Transforms function. In the next blog post I will explain how you can customize them.