How to make your forms better with jQuery?

We are ethical swinger javascript coders. That means - we are people who practice the swinging lifestyle and support/advocate it. 10% of our time we support swingers related websites - swingers clubs directories, social networks, events lists and do it for free. If you didn't get into our 10% window and you are representing any alternative relationship/sex lifestyle (polyamory, swing, kink, BDSM, casual sex) - we would be glad to serve you by 50% of market prices. Also, we doing an effort to spread the information about lifestyle and anything related to it. At this blog, we would make posts sometimes about our swingers related projects. One of project which we support is - pls, support it either - visit it, comment, add your clubs.

Say “Good Bye!” to the old, plain looking forms. Using jQuery we can create more interactive and stylish forms. What we need to do is, replace form fields that are difficult to style. jQuery provides lot of plugins which can imitate the behavior of these fields.

Then we need to add some interactivity to forms using auto complete, dynamic validation etc.

Replacing checkbox and radio button

Checkbox and radio buttons were a big problem for designers as the implementations were different in different browsers and it could not be styled. Now we can use simple jQuery plugins to imitate the behavior of checkbox and radio buttons. And these are fully stylable using css. Most of these plugins uses images for different states of checkbox button and hence it can be customized anyway.

Recommended plugins

Replacing Select box

Another browser dependent thing. Some browser supports basic styling but we need more customization.  This plugin replaces select box with a normal input field styled with background image. As it is an image, it is customizable by changing the image.

Replacing File input fields

Again, browser dependent thing which is almost impossible to style. Using Flash or Iframe, an Ajax effect can be achieved here.

jQuery Plugins for Ajax upload

Or if you want to use normal file input field, has provided a solution using javascript and CSS. But it is not perfect.

Auto complete

It is better usability to automatically suggest something that the user wants.

Restricting input fields

If we need some inputs in certain format, don’t rely on the user to input in that specific way. Instead restrict them to input only in that form. Less error in input.

Calendar Plugin

It is always better to show a calendar to pick the date rather than select box or text boxes. Also, user can not select an invalid date.

jQuery UI Date picker is the best calendar plugin. Also try the theme roller for customizing styles.

Form Validation

Instead of throwing errors after form submission, validating the form dynamically as the user types in and showing messages adds more interactiveness to form. User will know what is wrong as soon as he types in some thing. The best plugin to use is,

Form plugin

The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather information from the form element to determine how to manage the submit process. Both of these methods support numerous options which allows you to have full control over how the data is submitted. Submitting a form with AJAX doesn’t get any easier than this!