Yesterday, I came across Jumpchart.com and while I was checking out their website one thing catched my eye: validation feedback was animated! In this tutorial I will explain how to create this nice little trick.

Download source code View demo

The trick is very simple: after user presses signup button, validation occurs and all fields that are invalid get shaken a little bit. They have very simple web form as example below shows. I won't explain the web form structure and styling here, but will rather focus on animation effect.

<ul>
    <li class="first">
        <h3>Your Name</h3>
        <p>
            <input type="text" value="First and Last name" id="name" name="name" /></p>
    </li>
    <li>
        <h3>Email</h3>
        <p>
            <input type="text" value="my@email.com" name="email"  /></p>
    </li>
    <li>
        <h3>Password</h3>
        <p>
            <input type="password" name="passwd" /></p>
    </li>
    <li>
        <h3>Password confirmation</h3>
        <p>
            <input type="password" name="passwd_conf"  /></p>
    </li>
    <li>
        <h3>User name</h3>
        <p>
            <input type="text" value="MyUserName" id="userName" name="user_name"  /></p>
    </li>
</ul>

This is how this demo works: when user presses signup button, jQuery will get all empty input fields. If there is at least one empty input field, an animation will be applied to field(s).

$("#signup").click(function() {
    var emptyfields = $("input[value=]");
    if (emptyfields.size() > 0) {
        emptyfields.each(function() {
            // animation goes here
        });
    }
}); 

Let's see how to create simple animation. We want to move each field 10px to the left, then 10px to the right, repeat this one more time and set them back to their original positions. Example on Jumpchart even randomizes animations, but I will keep it simple here.

$("#signup").click(function() {
    var emptyfields = $("input[value=]");
    if (emptyfields.size() > 0) {
        emptyfields.each(function() {
            $(this).stop()
                .animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
                .animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
                .animate({ left: "0px" }, 100)
                .addClass("required");
        });
    }
});

Signup on Jumpchart has one usability issue, though. After short animation user looses validation feedback. That is why we will add CSS class "required" to invalid fields that will change their borders to red. This is all you need.

Please keep in mind that this animation can't be substitution for static validation feedback. Each invalid input field should be clearly marked once validation fail. This only adds nice effect that helps catch the user's attention. It's the same as difference between saying "I am here" and "Hey, I'm here!". You can read more about validation in Web Form Validation: Best Practices and Tutorials article.

Do you have some nice and original example of validation feedback?