1
pimps
spam pimp it un-pimp it
Tuesday, September 29, 2009 8:41:10 PM GMT

Animate validation feedback using jQuery
Animate validation feedback using jQuery
 
www.jankoatwarpspeed.com -- 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.             Your Name                                     Email                                     Password                                     Password confirmation                                     User name                         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 CS
beebee posted 163 days, 2 hours, 27 minutes ago     show counter code
tags: Tutorials

No comments yet, be the first one to post comment.

To post your comment please login or signup