Time for action – shaking an element

The open source .Net CMS Umbraco uses the shake effect when incorrect login details are entered in the sign-in form for its back-office administration area. In this example we can see how easy it is to implement this behavior using the shake effect.

1. Add the following markup to the template file as the basis of the log in form:

   <form>
     <h2>Login</h2>
     <label>Username:<input id="name" type="text"></label>
     <label>Password:<input id="pass" type="text"></label>
     <button id="submit">Login</button>
   </form>

2. Now add the following code to the empty closure at the bottom of the template file:

   $("#submit").click(function(e) {
     e.preventDefault();
   
     $("input").each(function(i, val) {
       if (!$(this).val()) {
         $(this).css("border", "1px solid red").effect("shake", { 
           distance: 5 }, 100);
       }
     });
   });

3. Save this file as shake.html. We also need a basic stylesheet for this example...