Tomomi Imura

Tomomi Imura

An Open Web advocate and front-end engineer, who loves everything mobile, and writes about HTML5, CSS, JS, UX, tech events, gadgets, etc. She unintentionally got 15min of fame by creating The HTTP Status Cats. Also, the opinions expressed here are solely her own and do not express the views or opinions of my employer.

Twitter LinkedIn Instagram Github Flickr

Creative Commons License
My articles are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

Vibration API Use Case: Form Validation

Vibration API Last Call

The Device API Working Group has published a third Last Call working draft of the Vibration API, and since the API is highly relevant to mobile devices, we have been discussing about it on W3C’s Web and Mobile Interest Group (aka WebMob).

Use cases

There has been some (dirty) jokes about the use cases in past, and recently Terrence Eden came up with funny use cases that actually may be somehow useful(Malicious Use of the HTML5 Vibrate API).

But seriuously, what can be good use cases for this API for everyday web expeiences besides gaming? I was even thinking that this API can be more harmful than useful when there is no UI indication (or permission setting like Geolocation) associated with it, and confuses users if developers abuse the API.

Then, Michael van Ouwerkerk suggested form validation. He mentioned on the mailing list - “Especially on mobile devices, with the software keyboard being displayed, it is easy to miss visual form validation messages. Some additional tactile feedback is an easily learned signal.”

Ah, finally there is a good use case scenario!

Demo

So I quickly put things up together to see how it works in a real life scenario. I used my old HTML5 form validation demo I wrote for Nokia Code Blog (Bummer, it has been deleted while cleaning up the Nokia assets for Microsoft’s partial aquisition. But I have the copy on my blog in 2012!)

Here is the demo in action. Turn the volume all way up so you can hear my phone buzzes:

You can try it by yourself on latest Firefox browser on Adnroid. (This demo fails on FF18 on FirefoxOS. Probably because the constraint validation doesn’t work? I need to look into it!)

Basically, what it does is that when a user tries to submit the form while the required field is left empty, or the entered text does not match the requirement (In this case, the character entered do not match the pattern for Twitter username, where some special chars are not allowed.), the phone buzzes as a feedback.

Code

<form>    
   <input id="username" type="text" pattern="^[A-Za-z0-9_]{1,15}$" required> 
   <input type="submit" value="Submit"> 
</form>

The credit for the pattern matching for the Twitter username goes to HTML5Pattern :-)

navigator.vibrate = navigator.vibrate || navigator.mozVibrate;
	
document.getElementById('username').addEventListener('invalid', function(e) {
    e.target.setCustomValidity("Enter a valid username, dumbass!");
    navigator.vibrate([100, 50, 100]);
}, false);

In the demo, when the invalid event is fired, the sequience pattern makes the device to vibrate shortly twice - for 100 ms, be still for 50 ms, and then vibrate for 100 ms.

I hope to see more use cases for the API.

comments powered by