CRM Field Masking with JQuery

It’s always a good thing to make the user experience as nice as possible. One thing missing from CRM is the ability to mask fields. You’ve probably seen this online on sites that ask for your phone number or social security number where the text box already contains the hyphens in the necessary spots. This clues the user in as to what format you’re expecting from them and leads to cleaner data.
Recently I had a client that needed all their zip codes to be entered along with the carrier code, which is the 4 number suffix at the end of a zip code. I figured this would be a great opportunity to implement some field masking.
Using a JQuery masking plugin written by Josh Bush. I was able to add a single line function to define my masking. To do the same, download and upload it to your CRM system as a web resource.
Next, jump onto the form that you want to add a field mask to and add the JQuery and JQuery Mask library.
sc_jquery1.6.2.min
sc_Jquery_mask
sc_global
A list of the necessary libraries
You’ll also notice that I have my own Global javascript file in the list. This file contains a reference to a Mask function that will call the JQuery Mask plugin. You can choose to register each field mask function call individually or you can place them all on a single function. I’ve shown both examples below.
function Mask(field, format)
{   
$("#"+field).mask(format);
}
function maskFields()
{
Mask("address1_postalcode", "99999-9999");
Mask("telephone1", "(999) 999-9999");
Mask("telephone2", "(999) 999-9999");
Mask("fax", "(999) 999-9999");
}
The next step is to define an OnLoad function call. We’ll be calling the Mask function above and passing it in the schema name of the field and the mask value we want applied.
Finally, the function call
You’ll also need to register one more function call on the OnSave. The reason for this is that the JQuery plugin doesn’t save the value to the CRM form. We need to take care of this. We do this by comparing the value in the html to the value on the field. If they’re different, then this means the user changed the field. Insert the following into your global and register it in the OnSave.
function formatFields(){  
formatField("address1_postalcode");           
formatField("fax");           
formatField("telephone1");           
formatField("telephone2");
}
function formatField(fieldName){           
if(Xrm.Page.getAttribute(fieldName).getValue() != $("#"+fieldName).val())                       
Xrm.Page.getAttribute(fieldName).setValue($("#"+fieldName).val());
}
And that’s all there is to it. Here are the results.
The JQuery plugin allows us to define all sorts of field masks and you can add dynamic logic to change the mask based on the country. Happy CRMing!
UPDATE:
To get optional formatting, take a look at examples on the jquery plugin page: http://digitalbush.com/projects/masked-input-plugin/
Refer http://taoofcrm.com/2011/05/19/crm-field-masking-with-jquery/