designbump

Ideally, users will fill the web form with necessary information and finish their job successfully. However, people often make mistakes. This is where web form validation comes into play. The goal of web form validation is to ensure that the user provided necessary and properly formatted information needed to successfully complete an operation. In this article we will go beyond the validation itself and explore different validation and error feedback techniques, methods and approaches.

When it comes to simpler user experience, having your form validation happen instantly on the same page is a lot cleaner than reloading pages and possibly losing some form content. In this tutorial I'll show you how to use jQuery to do some instant checking on an example comment form.

So you know how to code rock solid HTML into your forms, you even know some styling techniques, but client-side validation is still a pain to implement. Here I’ll show you how easy it is to add configurable validation and custom error messages using the original (and easiest to configure) jQuery form validation plugin, as well as a couple of HTML and CSS tricks to make your form more robust all round.

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.