Let the computer do the formatting

Brian Crescimanno recently published a form usability checklist on A List Apart. It's a great article that hits home some of my form pet peeves.
One of the points he makes is to let the computer do the formatting:
Few things confuse users as often as requiring that users provide information in a specific format....
Be reasonable; are we so afraid of regular expressions that we can't strip extraneous characters from a single input field? Let the users type their telephone numbers in whatever they please. We can use a little quick programming to filter out what we don?t need.
It is pretty easy to write a regular expression that takes out anything but numbers, you would do it like this in CFML:
<cfset form.phone = "(800) 555-1212"> <cfset cleanPhone = ReReplace(form.phone, "[^0-9]", "", "ALL")> <cfoutput>#cleanPhone#</cfoutput>
Now your left with a variable cleanPhone that has just the phone number digits. So now you need to format the phone number yourself, this can also be done easily with the help of the Left, Right, and Mid functions in ColdFusion:
<cfset areaCode = Left(cleanPhone, 3)> <cfset firstThree = Mid(cleanPhone, 4,3)> <cfset lastFour = Right(cleanPhone, 4)> <cfoutput>(#areaCode#) #firstThree#-#lastFour#</cfoutput>
This example however does make the assumption that the phone number is a US phone number. Things can get a bit more tricky when you add international phone numbers, and extensions into the mix.
add to del.icio.us
| Tags: validation, form, usability, phone, formatting, regex
Related Entries
- CFPARAM for Simple String Validation - May 29, 2007
- Howto build a form that isn't annoying (Part 1) - January 11, 2006
- Howto make Friendly URLs - November 30, 2005
- Keep in mind that users don't read - August 15, 2005
Trackbacks
Trackback Address: 519/411D2888E644D20DBC87FA2B85B01CA1
Comments
On 12/22/2005 at 3:04:02 PM EST Mike DeWolfe wrote:
1
I wrote this big long script for parsing / normalizing any phone number (local, North American, international, etc.) It was a pain, let me tell you. I may get around to posting that code for people to pick apart on my site (http://mike.dewolfe.bc.ca/).
On 05/14/2007 at 2:47:14 PM EDT Steve Dan wrote:
2
Here's a slight improvement -
<cfset cleanPhone1 = ReReplace(form.office_phone, "[[:space:]]", "", "ALL")> <cfset cleanPhone1 = ReReplace(form.office_phone, "[[:punct:]]", "", "ALL")> <cfset cleanPhone1 = ReReplace(form.office_phone, "[^0-9]", "", "ALL")>
<cfset areaCode1 = Left(cleanPhone1, 3)> <cfset firstThree1 = Mid(cleanPhone1, 4,3)> <cfset lastFour1 = Right(cleanPhone1, 4)> <cfset finalphone1 = areacode1&'-'&firstThree1&'-'&lastFour1>
On 11/21/2008 at 6:30:26 AM EST Ernest Breau wrote:
3
I made this function from your snippet that works with both 7 and 10 digit phone numbers
<cffunction name="phoneFormat" returnformat="plain" access="public"> <cfargument name="phone" required="Yes" type="string"> <cfset cleanPhone = ReReplace(arguments.phone, "[^0-9]", "", "ALL")> <cfif len(cleanPhone) eq 10> <cfset areaCode = Left(cleanPhone, 3)> <cfset firstThree = Mid(cleanPhone, 4,3)> <cfset lastFour = Right(cleanPhone, 4)> <cfset formattedPhone="(#areaCode#) #firstThree#-#lastFour#"> <cfelseif len(cleanPhone) eq 7> <cfset firstThree = Left(cleanPhone, 3)> <cfset lastFour = Right(cleanPhone, 4)> <cfset formattedPhone="#firstThree#-#lastFour#"> </cfif> <cfreturn formattedPhone> </cffunction>
Post a Comment
Recent Entries
- Cache Template in Request Setting Explained
- What Version of Java is ColdFusion Using?
- ColdFusion 9 Performance Brief from Adobe
- Request Filtering in IIS 7 Howto
- J2EE Session Cookies on ColdFusion / JRun
- Hands on ColdFusion Security Training
- ColdFusion 9 Solr Vulnerability - Are you at Risk?
- FCKEditor Year 2010 Bug for Firefox 3.6 with ColdFusion
<cfset cleanPhone1 = ReReplace(form.office_phone, "[[:space:]]", "", "ALL")> <cfset cleanPhone1 = ReReplace(form.office_phone, "[[:punct:]]", "", "ALL")> <cfset cleanPhone1 = ReReplace(form.office_phone, "[^0-9]", "", "ALL")>
<cfset areaCode1 = Left(cleanPhone1, 3)> <cfset firstThree1 = Mid(cleanPhone1, 4,3)> <cfset lastFour1 = Right(cleanPhone1, 4)> <cfset finalphone1 = areacode1&'-'&firstThree1&'-'&lastFour1>
<cffunction name="phoneFormat" returnformat="plain" access="public"> <cfargument name="phone" required="Yes" type="string"> <cfset cleanPhone = ReReplace(arguments.phone, "[^0-9]", "", "ALL")> <cfif len(cleanPhone) eq 10> <cfset areaCode = Left(cleanPhone, 3)> <cfset firstThree = Mid(cleanPhone, 4,3)> <cfset lastFour = Right(cleanPhone, 4)> <cfset formattedPhone="(#areaCode#) #firstThree#-#lastFour#"> <cfelseif len(cleanPhone) eq 7> <cfset firstThree = Left(cleanPhone, 3)> <cfset lastFour = Right(cleanPhone, 4)> <cfset formattedPhone="#firstThree#-#lastFour#"> </cfif> <cfreturn formattedPhone> </cffunction>







