After filling in half a dozen (or more) form fields and then pressing the submit button, the user has mentally moved on. Suddenly hearing a “clunk” sound and getting a popup that says “invalid ssn” is jarring to say they least… but it also means the user must now read through all the form labels looking for something that sounds like “invalid ssn”.

My solution is to flash the form field drawing the user’s attention to exactly what information needs to be fixed. And for that, I have created Blinker.js.

Just include Blinker.js into your page. Then, during validation, when a field is not valid, just call Blinker:

1

Blinker.blink('element-id', 'error-classname');

Blinker uses the supplied CSS classname to do the blinking, so you can use any effect you want: change the text color, change the background, underline, add a border, whatever floats your boat. Just declare the desired style in your CSS and then use that class name in your call, along with the DOM ID of the element to flash.

The scrollTo option allows Blinker to scroll a field into the viewport if it’s not visible. The onDelay and offDelay allow you to customize the rate of blinking, and cycle determines the number of times to flash.