Using Validation and Vibration API in HTML5

HTML5 provides bevy of features which enable developers to build some really interesting applications. In this example I will build a small HTML5 based validation which will vibrate the mobile device in case of invalid input.

Validation API

Validation in HTML5 is as simple as adding an attribute. Just add the required attribute and you are good to go.

In the above code snippet the text field is required and browser supporting this attribute will not let you submit the form if the field value is empty.

Now we need to check if the user has entered valid value in the field or not. It he hasn’t then we vibrate the mobile device. To check it in JavaScript use the statement input.validity.valid. This returns true in case valid value is entered in the field else returns false. In case its invalid you can then vibrate the mobile device using Vibration API.

Vibration API

This article describes Vibration API and how easy it is to implement.

First you need check if the device supports Vibration API:

if ("vibrate" in navigator) {...}

Then check the prefixed versions:

navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;

Then vibrate the device by calling:

navigator.vibrate(1000); // Vibrate for one second

Putting everything together

So you have an input field like this:

When user exits this field we call a function check(this) which checks if a valid value is entered in it or not. In this case the field cannot be empty. Here’s how the function would be:

function check(input) {
	// Check if field value is valid or not
	if (!input.validity.valid) {
		// Add class invalidInput to input fields

		// Check support for vibration API
		if ("vibrate" in navigator) {
			// Check for the prefixed version
			navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;
			if (navigator.vibrate) {
				// Vibrate mobile device
				navigator.vibrate([100, 200, 300]);

Here if input.validity.valid returns false then we set the class of input to invalidInput. Using CSS we style the input to show a red border around it and an exclamation mark. And then we vibrate the device three times.

This is how we style the invalidInput:

.invalidInput:required:invalid {
	background: url( no-repeat right -10px center;
	background-position: right 2px center;
	outline: none;
	box-shadow: 0px 0px 8px red;
    -moz-box-shadow: 0px 0px 8px red;
    -webkit-box-shadow: 0px 0px 8px red;

You can also validate for a particular pattern, email input, URL input and more. Just make sure you include the required=”required” attribute. For e.g.:

Below is the entire HTML code for my example. Go ahead and give it a try on your mobile.


Required field

Minimum length field

Email field

URL field

Screenshots for Google Chrome 36, Mozilla Firefox 31 and Opera 22 on Android

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>