Before we get started, feel free to check out the finished example.

As you might have already guessed, this will require some JavaScript magic, or more specifically jQuery vodoo. I am trying my best not to go into a rant on the wonderfulness of jQuery right now (I am sure you already knew that anyway!), so let me just say that it gets the job done, and easily.

So, here goes! As I got started on this, the first thing I did was to have a look at how best to implement the shaking or vibrating effect on the login form. I suspected that it might be part of the jQuery effects library, and yes, there was a shake() function, but I also stumbled on a nice plugin by Andreas Lagerkvist, which did just about the same thing. I chose the plugin approach as it was the lightweight way to go.

The actual implementation is pretty straightforward. We have a plain form, wrapped in a DIV which we will label as login.

We next include the jQuery related JavaScript files in the head of the document.

Using jQuery, we will then set-up an onclick event handler on the submit button . We will process the login form and take an appropriate action using this function.

Define a set of configuration variables that define the nature of the buzzing effect. In case the login fails, just make a call to the vibrate() function using the configuration variables as parameter. A general word of caution – make sure you don’t have the buzzing effect in action for too long, as it might be irritating to the user if the form buzzes for a long time! I found a duration of 500ms comfortable. In addition, we also display a warning message to the user, and then proceed to clear the input fields.

And it’s as simple as that! You have a nifty login form ready.

On a final note, I have made a minor modification to Andreas’ original plugin to suit our application. The changes are documented on the code.

Try it out, and let us know how it works. If you get this implemented somewhere, do post up a link in the comments!