Mobile is a special, fun place to be a web developer. On one hand, pretty much all of the browsers are new and support cool things. On the other, processors, graphics, and network are all slow, and you should care about battery life. Additionally, input on even the best phones is still unpleasant and error-prone.
But, because the browsers are new, we can make things a lot better.
Validation
Since you’re doing server-side input validation anyway (right?), client-side validation is just to make the user experience better. But, loading a bunch of JavaScript to do this is going to slow down the site.
Fortunately, you can bake a lot of the validation into the form itself and let the browser do it for you.
There are a ton of new input types in HTML5, and for common types, there is good support on mobile browsers.
First, let’s look at the pattern attribute. The value should be a regular expression that matches allowed values. This works on text, search, tel, url, and email fields. For example:
<input type="text" pattern="\d+ \w+">When a user enters text that doesn’t match the pattern, the browser will apply the :invalid pseudoclass to the element, which you can style with CSS however you’d like. Here, I set the background to pink.
There’s also a :valid pseudoclass that you can use.
Browsers apply the pseudoclass immediately, so if you want to let the user finish entering the text before calling them out, you can use a selector like this: input:invalid:not(:focus). (This worked for me on iOS but not on FirefoxOS.)
Or, use specificity to reset the change:
input:invalid {
/* Set something here. */
}
input:focus {
/* Undo the something from above. */
}There’s one particularly special value for patterns, which is matching numbers only:
\d*
[0-9]*iOS, in particular, will react to this pattern.
Entering data
Now you can skip the big JS download to validate your forms. Do it in HTML and CSS and let the browser handle it.
The other part of forms that is hard on mobile is entering data. Keyboards are small, and typing a lot is a pain. Here’s where the input types really become valuable.
Mobile browsers will change their keyboard in response to certain input types. Here’s how it looks with a regular <input type="text" />:
Here’s how it looks with <input type="email" />:
The difference is subtle, but both keyboards have made the @ symbol easier to get to. Now here’s <input type="url" />:
Gone are the space bars, now we have ., /, and .com readily available.
<input type="number" /> is an interesting case. We need to add the digits-only pattern (pattern="\d*" or pattern="[0-9]*") for iOS to recognize it, but then we get:
A nice, big, numeric keypad.
Some browsers support even more. Here are <input type="range" /> (obviously this one needs some additional visual feedback) and <input type="datetime-local" />:
Use it today
This all works today, right now, in the browser on my real phone.
If a browser doesn’t know what to do with a type value, it defaults to type="text", so it still works fine — so you may want to load a script in that case to do client-side validation.
If you’re already using all the tools available, get your friends and coworkers to do it, too. Peer pressure is a good thing. I have seen some of this in the wild, but it’s not everywhere yet.
