In the past, validating forms in the client has typically required doing some heavy lifting with JavaScript. But you may not know HTML5 changes all that. Browsers now check that the content of an input match its type (and we've got new types like email, url and number to make that even more useful). But, what you might not know about is the pattern attribute, which lets us use regular expressions directly in HTML to specify what format the user's input should have.
In this session, Chris Lienert will look at some of the common regex patterns you can use to validate user input, coupled with some of the many tricks he's learned to help users complete those forms we all love to hate.
2. HTML5 RECAP
http://wufoo.com/html5/
Before I get stuck into patterns, I’ll quickly go through some of the important parts of HTML5 forms. If you want to play along at
home, have a look at Wufoo’s HTML Forms guide.
3. HTML5 RECAP
<input
type="email">
Most of the new input types come with awesome custom keyboards for iOS and more recent Android (amongst others). Some
browser versions offer basic validation in but inconsistent implementations mean they can’t be relied upon.
The key new inputs types are “email”,
7. HTML5 RECAP
<input
type="datetime">
Unfortunately “datetime”, “time” and “year” input types have been marked as “in danger” by the W3C due to poor and
inconsistent browser support. There’s something of a chicken and egg situation when it comes to standards and browser
support. Unfortunately for the HTML5 date and time inputs,
11. PATTERNS
<input
pattern="/d*">
and, of course, “pattern”. Patterns allow you to provide a regular expression string primarily for input validation. A numeric
regulation expression like the this one can trigger a numeric keyboard. You’ll often see the above pattern as “[0-9]*” because
most people don’t know how to write regular expressions to save themselves.
12. NOW YOU HAVE TWO PROBLEMS
http://evolt.org/node/36435
I can’t remember the origin so I’ll call it an old saying: “You have a problem which can be solved with a regular expression. Now
you have two problems.”
I won’t pretend regular expressions are the easiest to write however a good guide the one on Evolt will certainly make life easier
for you.
28. Which brings me to a major problem when regular expressions.
29. Unfortunately, a fair number of programmers out in the wild haven’t quite worked out regular expressions yet so you need to be
really careful about what you’re write.
35. And here be dragyns. In the last couple of years, millions of passwords - hashed and otherwise - have been grabbed from
various online services which means that everything we though we knew about password validation is, in essence, wrong. This
also means that enforced password validation is probably wrong too. So, please don’t. Invest your energy into two factor
authentication or something else that’s actually secure rather than incurring the wrath of the users who do know what they’re
doing.
36. CREDIT CARDS
"4123
5678
9012
3456"
.replace(/(s)/g,
"");
>>>
"4123567890123456"
While I’ve shown how awesome regular expressions are for pattern validation, they can also manipulate data. Right here is
everything you need to strip spaces from a credit card number so I can enter it with spaces as it is on my card. You no longer
have any excuses.
37. ERROR MESSAGES
<input
pattern="d{4}"
title="Please
enter
a
valid
postcode
e.g.
3000">
Rather crucial when doing pattern validation is presenting a meaningful error message to users. In HTML5, browsers are abusing
the title attribute to this end. You can also set the .setCustomValidity() DOM property but title will work for most instances.
41. FURTHER READING
HTML5 Rocks: Constraint Validation: Native Client
Side Validation for Web Forms
http://www.html5rocks.com/en/tutorials/
forms/constraintvalidation/