How to Validate Text for Mobile

To reduce the client-side scripts and server-side trips for validation and to improve the usability of our forms, we should provide as many input validation properties as we can.

The first typical option is to define the maximum size accepted for the text input using the maxlength property, expressed as a number of characters. Many platforms automatically add a character counter while the user is typing.

Note: A Javascript library can add support for placeholder and autofocus (an HTML 5 attribute for input tags that indicates that this control has to be focused on as soon as the page is loaded) even on devices with no support for those attributes. You can download this library from http://gist.github.com/330318.

WAP CSS added the property -wap-input-format, which allows us to define the type and number of characters that the user can input (known as the input mask). Specifying an input mask will reduce the user’s error possibilities; it can yield error messages like the one shown below. The -wap-input-required attribute prevents the user from moving the focus away from a field until she has entered some text in it.

Browsers compatible with WAP CSS input constraints show some kind of error message when the user enters text in an invalid format and then tries to move the focus away from that field.


The content of the -wap-input-format attribute is a string mask using the special characters in the table below.

WAP CSS input format patterns

Pattern	Usage
a	Any character, letter, number, or symbol.
A	Any uppercase alphanumeric character.
n	Any numeric character or symbol.
N	Any numeric character.
x	Any lower case alphanumeric character or symbol.
X	Any uppercase alphanumeric character or symbol.
m	Any character, lowercase by default, but with uppercase possible.
M	Any character, uppercase by default, but with lowercase possible.
{n}{pattern}	A fixed number of repeats (n) of the pattern defined. For example, 4N means four numeric-only characters.
*{pattern}	Any number of repeats of the pattern defined. For example, *A means any number of uppercase alphanumeric characters. It can be used only once per pattern.
{pattern}{pattern}	Pattern combination. For example, A*a means one uppercase character and then any number of any other character.

We can also escape other characters to create complex patterns, but this is not recommended because the pattern matching engines are not the same on all platforms and strange behavior can result.

Note: Internet Explorer Mobile also accepts the Boolean attribute emptyok defining whether a value is required (false) or not (true).

The next sample shows the standard way to define a required U.S. zip code text input, an optional phone number text input, and a required password numeric field:

<dl>
   <dt><label for="zip">ZIP Code</label></dt>
   <dl><input type="text" name="zip" style="-wap-input-format: '5N';
     	-wap-input-required: true" /></dl>
   <dt><label for="phone">Phone Number</label></dt>
   <dl><input type="text" name="phone" maxlength="15" style="-wap-input-format:
     	'*n';" /></dl>
   <dt><label for="password">Password</label></dt>
   <dl><input type="password" maxlength="8" name="password"
     	style="-wap-input-format: '8N';  -wap-input-required: true'" /></dl>
</dl>

Many older XHTML mobile browsers understand the nonstandard inputformat or format attribute, imported from WML. The syntax is the same as for the WAP CSS attribute. If we want to add the same feature for older Openwave-based devices, for example, we can use the inputformat attribute. Internet Explorer uses the format attribute with the same pattern inside:

<input type="text" name="zip" inputformat="5N" format="5N" maxchars="5" />

The table below lists which input formats are supported by which mobile browsers.

Browser/platform	-wap-required	-wap-input-format	HTML attribute	placeholder
Safari	No	No	No	Yes
Android browser	No	No	No	Yes
Symbian/S60	Yes, type required to get out the input. Error message shown in 3rd edition	Yes, doesn’t allow invalid chars and show and red style (5th edition) or an error message (3rd edition) if incorrect	No	Yes in 5th edition No before 5th edition
Nokia Series 40	Yes, type required	Yes, doesn’t allow invalid chars or shows a message error	No	Yes in 6th edition No before 6th edition
webOS	No	No	No	Yes
BlackBerry	Show alert if missing input	Filter characters	No	No
NetFront	Show alert at form submission	Filter characters and OK only appear when input is correct	No	No
Openwave (Myriad)	Error message	No behavior in 6.x Filter characters in 7.0	Input	No
Internet Explorer	Error alert at submit	Error alert at submit	No	No
Motorola Internet Browser	Error on submit	Filter text input	No	No
Opera Mobile	Error message in form submission	Error message in blur and in form submission	No	No
Opera Mini	No	No	No	No