In this blog post I will assume that you understand how MaskedInput Transforms function. It was explained in the
previous blog post.
Here is the list of currently implemented transforms:
- CreditCard_VisaMasterCard - Visa or MasterCard credit card number.
- CreditCard_AmEx - American Express credit card number.
- Telephone_NorthAmerica - North American telephone number.
- ZipCode - American ZIP code.
- PostalCode - Canadian postal code.
- PostalCode_Australia - Australian postal code.
- EmailAddress - e-mail address.
- empty - accepts all inputs.
empty Transform is a special case. It accepts all inputs, and it doesn't mask or unmask them. Here is how it looks in code:
'empty':
{
'validate': function(maskedInput)
{
// Accept all input:
return true;
},
'unmask': function(maskedInput)
{
// Just pass on the edited displayed text:
return maskedInput.masked.value;
},
'mask': function(maskedInput)
{
// Just pass on the unmasked value:
return maskedInput.unmasked.value;
}
}There is not enough space in this blog post to show the code of the rest of the Transforms, but I made
the source code file available for download.
Ideally the available transforms will be enough for your requirements. New transforms are very easy to build in, so please don't hesitate to send in your suggestions.
However, for those times when your requirements cannot be met by the built-in transforms, there are a number of ways to customize the MaskedInput.
In addition to Transform, MaskedInput exposes three more server-side properties:
TransformValidate,
TransformUnmask, and
TransformMask. These allow you to override the behaviour of any of the three transform functions. For example, to make the Visa card transform featured in the previous blog post mask with dashes instead of masking with spaces, you can do something like this:
<script type="text/javascript">
function maskVisaWithDashes(maskedInput)
{
return maskedInput.unmasked.value.replace(/^(\d{4})(\d{4})(\d{4})(\d{4})$/, '$1-$2-$3-$4');
}
</script>
<ComponentArt:MaskedInput runat="server" ID="MyMaskedInput"
Transform="CreditCard_VisaMasterCard"
TransformMask="maskVisaWithDashes"
/>
This allows you to fully override any of the Transform's functions. Note that you can also leave the Transform property blank. In that case, the control defaults to the empty transform.
In the next blog post, I will introduce another more integrated way to add a new Transform.
