HTML5 Form Field Validation with CSS3

HTML5 Built-in Form Validation

HTML5 specifications come with a full of goodness that make web devs’ lives easier.
The one of the goodies, the client form validation is the one I like a lot, because, for example, by adding required attribute to an input, I don’t need to write any additional JavaScript to warn a user, when the user submits a form without filling out the required fields. The interactive warning UI comes with browsers.

The “Speech bubble” UI is built in with HTML5-enabled browsers. (This screenshot is taken on Chrome. Other browsers like Firefox and Opera have their own interface.)

Pattern Matching

You can also validate against patterns that defined by you. The pattern attribute specifies a regular expression against the control’s value.

<input type="text" pattern="[0-9]{13,16}" title="A credit card number" />

A user is required to enter values to match a regular expression pattern, in this case, a 13 to 16 digit number.

CSS3 User Interface Selectors

There are numerous user interface state pseudo-classes. You’ve probably already known :hover, :active etc. According to this W3C Candidate Doc, there are additional pseudo-classes defined, such as :valid, invalid, in-range, out-of-range, required, optional, read-only and read-write.

So I played a bit with :valid and :invalid to check against the regular expression pattern.

The diagram shows: 1) The entry is displayed in red when the entered text is not matched.
2) The built-in HTML5 message is displayed when the user submits the form while leaving the invalid entry. No additional CSS is used.
3) The entry is in green when it matches with the defined pattern. Also, a check mark is used as an indicator to tell it is valid.

The simplified code is below. Also you can view the entire code and the working demo on jsFiddle.

<input id="cc" type="text" pattern="[0-9]{13,16}" required />
<div class="input-validation"></div>
<input id="payButton" type="submit" value="Pay Now" />

input[type="text"]:valid {
    color: green;
}

input[type="text"]:valid ~ .input-validation::before {
    content: "✓";
    color: green;
}

input[type="text"]:invalid {
    color: red;
}

I was too lazy to create an image, so I just used the unicode checkmark. Actually, what I wanted to do was that inserting the unicode content after the input with this CSS- input:valid:after. However, it is not possible to add contents to the input with the CSS since input has no document tree content. Therefore, I used the extra div after the input. (So I am using the sibling selector, ~, to specify the div).

If you would make it prettier, I suggest you should place some icons as a background-image of the input, instead of just dumping some unicode char!

input[type="text"]:valid {
    background: url(thumb-up.png) no-repeat top right;
}

References

HTML5 Form Validation on SUMO (Mozilla Blog)

CSS3 Basic User Interface Module by W3C

The pattern attribute by WHATWG

HTML5 Patterns

HTML5 Input Event Handlers and User-Experience

TL;DR

Summary: Use oninput event handler (or input event handler event type) when you register an event to the HTML5 input[type="number"], instead of onchange, onkeyup/down (although you may want to include them as the fall-back).

The Whole Story

When I participated to compete for Node.js Knock-out in the end of the summer, I have learned one thing (besides all the node.js coolness) in a bitter way, from the comments by judges: “the app UI is confusing.”
Actually, I believed that the app user-interface overall was intuitive enough, however, the one mistake I made with an HTML5 form killed the user-experience – I used a wrong event handler, something that doesn’t trigger when it needed to…

So here, I explain what I didn’t know; the newly introduced event handlers for HTML5.

The screenshot above is a number input control, the input element with a type attribute which value is “number”. It represents a precise control for setting the element’s value to a string representing a number.

Simply, you can write this in html like this:

<input type="number" placeholder="Pick a number" id="numPeople" />

You can add some more custom attributes like, required, autofocus, pattern, etc, and the number-specific attributes, min, max, and step. If you are not familiar with the html5 form input attributes, I recommend you should read New form features in HTML5 by Dev Opera.

So what I wanted to do in the particular app was that populating new fields as the user chooses a number. The simple user-flow is:

1. “How many people would you like to add?” – e.g. a user picks 5
2. n-number of new fileds are populated – e.g. 5 text fileds are displayed
3. the user fills out the text fields
4. the user submit the form

To make the flow #1 and #2 work, what I did was that I registered an event listener to the number input element, and used an event type to listen for.
OK, so which event type? – Well, I initially thought of change, however, it requires the user to unfocus (blur) the field once, to get the event captured. So, I decided to use keyup so as soon as the user finish typing a number, the event is fired and the function to display the extra fields is called.

OK, it sounds fine – well, only as long as the user only enter the number manually!

Remember, the HTML5 input field type="number" has the special user-interface, a spinner control, which allows a user to increment and decrement its value. And here is the problem – the keyup event does not get triggered when the spinner up/down arrow is clicked, at least on Chrome (which the judges were using)! So when some judges tried the app for the first time without much knowing what it does, and picked a number with the spinner control, nothing happened. The app’s UX was killed right there!

So, really, which event did I need to use?

The answer is input. I did not know about the newly introduced HTML5 oninput event handler until I found this article.

Now, the action is triggered when a user manually type a number, or when the user increment/decrement with the up/down spinner!

var numPeople = document.getElementById("numPeople");

numPeople.addEventListener("input", function(e) {
    var num = numPeople.value;
    ...
}, false);

Please see the entire code snippet and working demo!

Also, I made another small demo here so you can see when the input, keuyp, and change are captured.

onsearch Event

Additionally, there is another HTML5 event that you probably want to know – the search. The action is invoked when a user hits the enter key or clears the query (by clicking the (x) in a search control.
I can’t find any references in WHATWG or W3C, and apparently, its upport Level is the Apple extension. I tested it work on the latest Chrome, but not on Firefox 9 or Opera 11.5.

<input type="search" name="username" placeholder="Enter a Twitter username..." results="5" id="search" />

var s = document.getElementById("search");
s.addEventListener("search", function(e) {
    var q = s.value;
    showTweets(q);
}, false);
...

The code snippet and demo is at jsFiddle, too!

References

whatwg.org – Web Forms 2.0
whatwg.org – oninput Event Handler
Effectively detecting user input in JavaScript
Safari HTML Reference (onsearch)

Creating Usable Enyo UI – Buttons and Interactive Dialogs

I wrote this article, Creating Usable UI—Buttons and Interactive Dialogs, for Palm webOS Developer Portal. I walk through the Enyo button setup, the proper use of color and text, and how best to use buttons in intuitive, consistent user dialogs.

This is written for the webOS’s very own enyo.js framework, however, the major contents should apply to any web and app development so please take a look!

Thanks!

p.s. In case you don’t know – I am a developer relations engineer at Palm (acquired by Hewlett-Packard). As you may know, the best-yet-most-unfortunated mobile-platform, webOS’s future is unknown in this moment…

Google Docs Palm Pre Stencil

A few month ago, after I was saw the impressive web wireframes templates and iPhone stencil created with Google Docs by Morten Just, on Docs blog, I started playing with this Google’s new addition to the Docs family, Drawing, to copycat this idea and made a Palm Pre stencil.

So here you go! You can check out my Palm Pre stencil on Google Docs.
If you’d like to have your own copy, sign in your google account, then:
Choose file > make a copy

You can drag or copy the UI widgets to the white canvas (printable area). To edit text, you need to ungroup the object first, by selecting the UI widget to be editted and go to Format > Ungroup (you may need to repeat ungrouping grouped objects) then double-click the text to edit.

Also, I labeled each UI objects to match the Mojo UI Widget names so developers can reference the stencil and code easily!

iPhone App – MuniApp for San Francisco Muni riders!

Ta-da, finally there’s an app for that! – I mean an iPhone native app that I involved is available on App Store!

This app is called, MuniApp, and this gives you access to San Francisco’s MUNI transit system on the go with real time predictions for buses, metro and cable cars.

I have worked on some UI and icons, while my friend Alberto has coded all the Obj.C. We are both SF residents and rely on MUNI pretty frequently and we do use this app on daily basis. Honestly, this is really simple and useful app

The official website for MuniApp is at www.obapp.com/muniapp

To directly go to App Store on iTunes, go to this link!

Mobile Firefox UI

I just noticed the 2nd proposal for Mobile Firefox UI was posted, (dated Feb.8).

This screenshot is for touch-screens, by looking at its dimension (240×320), it is almost obviously made for iPhone.

Buttons are overlaid at bottom and by tapping it activates URL bars and more options, including refresh and bookmark.

Personally, I think they need to redo the icon designs. This can look much nicer.

Source: Mozilla Links

Adding a WebClip Bookmark Icon for iPhone and iPod

While MacWorld is held here in San Francisco, I am commuting to Sunnyvale… At least I am trying to catch up with all these exiting news from Apple.

One iPhone dev-related announcement caught my attention is a WebClip. -The WebClip is a web bookmark icon that is displayed on start screen on iPhone (and iPod), and looks just like an application launch button. (To make it work, you need to upgrade the firmware to 1.1.3.)

To create a custom icon is as easy as adding a favicon.ico for desktop website.

First, create a 57×57 png image. (Don’t worry about round-corners and shine.)

Then do either:

1) Place a PNG image named apple-touch-icon.png at the root directory of your web server.

or

2) Add <link rel="apple-touch-icon" href="/customIcon.png"/> within the <head> element of the page.

Once added to the springboard screen, round-corners and glassy overlay will be added to your icon nicely

Usability Guidelines for Mobile Web

WebCredible has this great article about usability on mobile web, 7 usability guidelines for websites on mobile devices. With actual examples and screenshots, pros and cons of each are explained nicely and clearly.

The seven guidelines are:

1. Meet user’s needs quickly
2. Don’t repeat the navigation on the every page
3. Clearly distinguish selected items
4. Make user input as easy as possible
5. Only show essential information
6. Place basic browsing control
7. Design mobile-friendly layouts

Do they seem to be common-sense to you?
Yeah, but trust me, creating mobile web pages following the guidelines is not as easy as it appears to be. Mobile web is not just a dumb-down version of its desktop web sites, as some of you may think. Mobile web has whole new purposes!

By the way, I am glad to see Yahoo!’s oneSearch is used as an example for the “meet users’ needs”. We’re working really hard to provide the best mobile experiences to you!!!