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:
If SharePoint site-definition forms will not enforce input-masking, we can easily apply it ourselves using jQuery JavaScript library. You can dowload the jQuery jlibrary here. (You can link to jQuery library from one of the Google sites; I only recommend you download the js file itself in the event you’re running your development sandbox in an isolated network). You will also need to download the input-mask jQuery plugin. Upload the jQuery js file and the input-mask plug-in (another js file) into a “scripts” library in your SharePoint site.
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:
<script src="../../scripts/jquery-1.3.2.js"></script>
<script src="../../scripts/jquery.maskedinput-1.2.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input[title='Business Phone']").mask("(999) 999-9999");
$("input[title='Home Phone']").mask("(999) 999-9999");
$("input[title='Mobile Phone']").mask("(999) 999-9999");
$("input[title='ZIP/Postal Code']").mask("99999");
});
</script>
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 haven’t had a chance to blog about jQuery yet but I will do this sometime next week. jQuery is a very useful and powerful JavaScript library. There are many other tricks you can do in SharePoint with jQuery and I will discus them next week.
I hope you guys enjoy Halloween tomorrow. And don’t eat too many candies!
This is very helpful. I have been looking for better a masking / validation solution for SharePoint and could not find anything. Thank you.
Do you know what the mask would be to have it default to 01 if 1 is displayed?
Hi Bob,
Can you be more specific with the scenario that you’re talking about? If you mean that the textbox autoformats a value of “1” and displays it as “01”, then that’s a little bit a different behvior than a typical mask, Input masks typically just sets the rules on what characters you can type-in to a textbox. It’s like a template of what a user can type. If a user types-in “1” and the textbox reformats it to “01”, then that’s more of a custom formatter than a mask. I hope that helps.
-Gabe
hi all.. i tried to apply masking on textbox to validate NIC number with the method given above. am using this in user control. it is not giving any error but not working as well.. need your kind help.
regards.
Bob, what mask are you using for NIC? Also, did you match the right input element using JQuery?
-Gabe
Have you tested this with Sharepoint Foundation 2010? Trying to get it to work but no luck.
It’s a really good and practice tip!
Thank you so much!
Would this work without SPD? Can this code just be placed in a CEWP on the newitem or edititem.aspx?
Can this be done via a CEWP or do you have to have access to SPD?
Hi Steph,
I used this technique in MOSS 2007 forms. You should be able to use CEWP to add the JavaScript-includes and also to embed the actual jQuery input masking. I could do it in MOSS 2007 forms without having to use SharePoint Designer. In this article, I instruct to use SharePoint Designer. But you don’t have to. I haven’t tested this in SharePoint 2010 yet–the control-matching (was using the input control’s title attribue instead of ID or name) will be different. If you can match the inputs (textboxes like “Email”, “Phone Number”) correctly, then this technique should hold. I’ll get with you once I confirm that it can be done using CEWP only and not having to depend on SharePoint Designer.
-Gabe
Any advice on how I can use jQuery to comma-delimit text entries on a field? I have a simple list our support group is using for very routine calls. In one text field they can list several servers (e.g., RS2, RS3, etc.). I want the field to automatically delimit where there is a space between characters (so “RS2 RS3” is “RS2, RS3”).
Thanks!
Hi Dave,
You can do something like the following to comma-delimit the textbox value:
$(“#t1”).blur(function () {
$(this).val($(this).val().toString().replace(/ /g, ‘,’));
});
This is straight-forward approach assuming that there is exactly one space character in between the values. Replace “#t1” with your own JQuery selector. I hope this helps.
-Gabe
Just tested using SharePoint 2010 Foundation and a CEWP. Works like a charm. Thanks for posting!
Glad to hear it worked great for you Jim!
-Gabe
Gabe/Jim
I have very little experience with modifying the code in SPF and SPD 2010 and can’t seem to get this working on my server.
The first clarification I need is, can this be done on a list’s NewForm/EditForm?
Can you provide some details on how to do so, when I try the instructions above on a test jsNewForm.aspx I get the following error: “Web Part Error: Type ‘Microsoft.SharePoint.WebPartPages.DataFormWebPart’ does not have a public property named ‘script’.”
I placed your code from above (updated to my column and new .js files names) just above the and under onetIDListForm.
$(document).ready(function() {
$(“input[title=’Cell Phone’]”).mask(“(999) 999-9999”);
});
Sorry the page striped out some of the code, I have re-posted the question.
Gabe/Jim
I have very little experience with modifying the code in SPF and SPD 2010 and can’t seem to get this working on my server.
The first clarification I need is, can this be done on a list’s NewForm/EditForm?
Can you provide some details on how to do so, when I try the instructions above on a test jsNewForm.aspx I get the following error: “Web Part Error: Type ‘Microsoft.SharePoint.WebPartPages.DataFormWebPart’ does not have a public property named ‘script’.”
I placed your code from above (updated to my column and new .js files names) just above the DataFields,/DataFields and under onetIDListForm.
script src=”../../scripts/jquery-1.7.2.min.js”/script
script src=”../../scripts/jquery.maskedinput-1.3.min.js”/script
script type=”text/javascript”
$(document).ready(function() {
$(“input[title=’Cell Phone’]”).mask(“(999) 999-9999”);
});
/script
Gabe, looks like where I was inserting was not exactly correct. I needed to go in to Advanced mode in SPD and as you suggested directly below the onetIDListForm element.
Thanks for the article.
Hi Stacy,
I’m glad you were to get it to work. In general, in SP2010, if using just the browser, you have to use Content Editor Web Part to embed custom javascript . If you go the SP Designer route, you have to edit page in advanced mode.
-Gabe
Thanks stacy and Gabe …. for your question i was able to solve the same problem here.
Hi,
Great tip, thanks for this. I’m having a issue with date fields however. When I try to use this on date fields in a editform.aspx in SPD2007 all works as expected except for when I go back into the form. Eg, I edit a item and enter in a date, no problem the input mask shows up fine. If I edit the item again, the date is no longer displayed but is still there in the background as I can see it in list view. Any idea’s? (normal text fields work fine, just seems to be date fields).
Thanks.