Easy user interaction and data collection is really a key functionality on most websites and web applications. Providing users high quality and intuitive input forms may be just what is needed to make your users take the time to fill in and submit the information you’re trying to collect.
In this article I have collected a number of really essential jQuery Form Enhancements. A few cheat sheets have been added as well.
Quick reference to all jQuery 1.3 functions and properties. Note that it doesn’t cover any of the UI functionality as this could easily be a whole cheat sheet in and of itself.
jQuery Form Element Enhancements
File Style plugin enables you to use image as browse button. You can also style filename field as normal textfield using css.
If you use Skype I am sure that you noticed that animated button for adding more people to a chat. When you click on it the icon on the left “jumps” for a few times. I love that animation. And that’s why I’m going to show you how to create the same button using jQuery and some simple CSS.
An unobtrusive way of creating a HTML type combobox from a existing HTML Select element(s), a Demo is here.
Avery user friendly way to show checkboxes.
If you ever saw how products like Microsoft CRM look like you probably noticed there are input fields that have “embedded” image buttons inside them. If your clients saw that, there is a probability that they will want to have it in their applications.
Whether you agree or not, here is how you can do it easily. So easily that you will have to add just a few lines of code and enable this feature in entire application.
Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.
This plugin is a jQuery styling plugin wich allows you to skin form elements.
This script provides you with the ability to customize the design of checkboxes in your web forms. You can use the default skin and the Safari skin which are provided with the package.
Password Strength Indicator does what it says on the tin, however my preference would be to have the colors swapped round red for bad, green for good
Password Strength Meter is a jQuery plug-in that provides a smart algorithm that shows the strength of the input.
It’ll validate against your username records so that a user can choose a unique name straight away.
How to replace radio buttons and check boxes with jQuery.
Have you ever wanted a simple rollover technique with a form submission button? Something like this:
It generically adds the toggle function to any table rows you specify based on the css class names. It will by default toggle any checkboxes within the table row. However, you can manually exclude checkboxes based on name, id or css classes in the script. In addition to the phpMyAdmin function, there is an initialization step in the script that correctly marks a row when it’s considered checked on page load.
Form Masking with jQuery
meioMask is a simple use plugin for creating and applying masks at text input fields.
A mask is defined by a format made up of mask literals and mask definitions. Any character not in the definitions list below is considered a mask literal. Mask literals will be automatically entered for the user as they type and will not be able to be removed by the user. The following mask definitions are predefined:
- a – Represents an alpha character (A-Z,a-z)
- 9 – Represents a numeric character (0-9)
- * – Represents an alphanumeric character (A-Z,a-z,0-9)
Form Tool tips
jTip, not unlike Thickbox, pulls data from the server using a hidden http request. It’s nothing that fancy, really, just your normal everyday over hyped AJAX/AXAH type stuff. In keeping with all of this web 2.0 silliness, this means all of the tips are external. This is a handy feature depending upon the type of usage a person might intend for jTip.
Form Element Manipulation
This plugin greatly expands the ability to retrieve and set values in forms beyond jQuery’s standard val() method (and Mike Alsup’s Form Plug-in’s fieldArray() method) by allowing you to interact with all types of form field elements (except input[type=”file”], which is a read-only element.) It works the same way for text elements as it does for radio, checkbox and select elements.
ToggleVal gives you the option to populate the default text of form fields (in a few different ways), and will then toggle the default value when the field receives and loses keyboard focus.
magicpreview automatically updates selected elements on a page based on form fields. Perfect for previewing forms.
Autosave is designed to save the progress of forms by saving the fields to cookies so you won’t lose anything should anything go wrong
The plug-in saves the form fields at certain intervals (the default is every 10 seconds) and whenever you leave the page.
A sliding contact form built with jQuery. Form is normally hidden at the top & slides down with the first click & up at the 2nd click.There is no form validation & mail sending code included. Demo
A very nice tutorial from Nettuts on creating an Ajaxed contact form with jQuery & PHP. The form has an input validation. After the message is sent in th ebackgroung a “success” message is displayed to the user. Demo
This Ajaxed contact form uses jQuery & the jQuery Form plugin for input validation. Inputs are sanitized for the form being safe. A success or an error message is displayed after the form is submitted without leaving the page. Demo
This form checks the fields to see if they are valid, displays an error if there is a problem & sends the message as an e-mail when everything is ok. E-mail is sent via a PHP file with no refresh. The script is normally an e-mail sending form which can easily be modified to turn it into a contact form.
“Previously on NETTUTS, Philo showed how you can use jQuery to add form validation to wordpress comments that works without any page reload. Another great way of utlizing jQuery to enhance user experience is to not just validate, but to submit your form entirely without a page refresh. In this tutorial I’ll show you how easy it is to do just that — submit a contact form that sends an email, without page refresh using jQuery! (The actual email is sent with a php script that processes in the background). “
Calendars and date pickers
FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event)
The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input’s value.
Date Picker component with a lot of options and easy to fit in your web application.
Simple date picker script. Author requests assistance for adding improvements.
The jquery-week-calendar plugin provides a simple and flexible way of including a weekly calendar in your application. It is built on top of jquery and jquery ui and is inspired by other online weekly calendars such as google calendar.
MonthCalendar is a full month calendar that supports events. You simply initialize the calendar with options and an events array and it can handle the rest. The plugin does have extension points that allow the developer to interact with the calendar when the display is about to change months, after the display has changed months and when the event bubbles are clicked on. jMonthCalendar now supports hover extension points, hover over an event and trigger an event like an alert(); By default the events would each have a URL supplied that would link to a details page.
jQuery plugin that makes filling time inputs very easy. With a maximum of 2 clicks, a user can fill the form and there is also a keyboard navigation support too.
Are you trying to build a custom search feature for a site? The Auto Complete jQuery plugin can supercharge your form inputs with additional user feature.
Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering.
jQuery paginator is based on the jQuery Pagination plugin originally written by Gabriel Birke. For information, documentation and license please visit http://plugins.jquery.com/project/pagination
jQuery paginator plugin file already includes the required jQuery pagination plugin.
jQuery hot key plugins
jQuery.Hotkeys plugin lets you easily add and remove handlers for keyboard events anywhere in your code supporting almost any key combination. It takes one line of code to bind/unbind a hot key combination.
The jQuery UI Slider plugin makes selected elements into sliders. There are various options such as multiple handles, and ranges. The handle can be moved with the mouse or the arrow keys.
Sliders have many things going for them as a UI element; they offer the benefit restricting the choice a user has, without taking up the space of a drop down. If you need to ask the user to select a number between a range, you can either do an input box with validation, a drop down select element listing each possibility, or you can do a slider.
jQuery File Uploaders
Uploadify is a package written on top of jQuery that gives you both the client-side and server-side functionality you’ll need to handle single-file and multi-file uploads.
Virtual Keyboard for Form Input Elements
jQuery Keypad is a plugin for creating more secure input entry by providing a keyboard like interface. The values to be displayed can be easily set which makes it possible to show only numbers, foreign letters, etc.
Tutorial on creating a virtual keyboard with jQuery (script can be downloaded).
Such virtual keyboards are generally used in bank websites or forms that require extra security. They are a step for preventing keyloggers (but may not be an absolute solution as keyloggers are getting smarter).