It’s that time of the year again when kids will be kids and grown-ups can be kids. I’m talking about Halloween. Halloween is one of the more festive events in the year, in my opinion. You have tons of candies, parties everywhere, and costumes galore. When it comes to costumes, there are some people who really dress-up. And then there some who simply don a mask for their Halloween costume. Masking is the inspiration for today’s post: input-masking in SharePoint Forms.
Input-masking is a programmng technique which allows applications specify the rules for the data-inputs. For example, ZIP codes should be 5-digit numeric number or phone numbers should be numeric (mostly) and appear in the form of (111) 555-0000. In SharePoint, you will see fields in some forms that should have a mask for the input. Take the Contacts List as an example: a contact has phone numbers and ZIP code. Yet, SharePoint doesn’t validate what users input in those fields. Take a look:
Open-up the SharePoint Site and edit the list’s NewForm.aspx or EditForm.aspx in SharePoint Designer. In this example, we are editing the Contacts List EditForm.aspx. You want to look for the table element whose ID is onetIDListForm. Insert the following code just below the table.onetIDListForm element:
I will write another blog-post about jQuery. For now, I will quickly explain what the code above does. $(“input[title=’Business Phone’]”) selects the text-box for the Business Phone field. There are different ways to select elements using jQuery. What I did above as select the input whose title is “Business Phone”. After the element has been matched, we call the plugin’s Mask() method. Why not select the input-element using the ID? Because you do not know nor control what ID value will be generated by SharePoint. The typical input element generated by SharePoint looks like the following:
<input name="ctl00$m$g_d1b9fb52_9f94_4f65_b370_2c23efb30c7e$ ctl00$ctl04$ctl08$ctl00$ctl00 $ctl04$ctl00$ctl00$TextField" type="text" maxlength="255" id="ctl00_m_g_d1b9fb52_9f94_4f65_b370_2c23efb30c7e_ctl00 _ctl04_ctl08_ctl00_ctl00_ctl04_ctl00_ctl00_TextField" title="Mobile Phone" />
Selecting the input-text using the title attribute is easier and will be consistently rendered by SharePoint that way anyway (assuming the list column stays the same and doesn’t get modified.)
After the masks have been applied, the SharePoint Contact form will now ensure that the inputs conform to the phone number and ZIP code format:
I hope you guys enjoy Halloween tomorrow. And don’t eat too many candies!