Formly allows an unbelievably easy way to add style and validation to your forms. Forms are everywhere and, usually, suck. Formly makes adding forms to your site a bit more exciting. Easily add style, validation, and a more impressive user interaction with a single function.

Formly is a light little fella. 17kb in total for the full and 14kb for the minified version. It has been tested on iPhone/iPad, Chrome 8.0+, Firefox 3.0+, Safari 4.0+, Internet Explorer 7.0+.

Published under: Validation | Forms | MIT License

Ajax Autocomplete for jQuery allows you to easily create autocomplete / autosuggest boxes for text input fields.

It is built with focus on performance. Results for every query are cached and pulled from local cache for the same repeating query. If there are no results for particular query it stops sending requests to the server for other queries with the same root.

It has been tested on IE 7+, FF 2+, Safari 3+, Opera 9+. And it is is freely distributable under the terms of an MIT-style license.

Published under: Forms | MIT License

CreditCard.js is a credit card validation library for JavaScript using Prototype. Using CreditCard.validate(’1111 2222 3333 4444′) returns true/false, the given string is automatically stripped of whitespace, so it can be plugged directly into form validations.

It checks if the luhn validation code add up, and the range and the length of the numbers. You can do the card identification via CreditCard.type(string) returns “Visa”, “MasterCard”, etc.

Published under: Forms | License Free

QapTcha is a draggable jQuery captcha system with jQuery UI. QapTcha is an easy-to-use and intuitive captcha system. Users do not need to type letters or digits from a distorted image that appears on the screen. Instead, they simply need to drag an element of the form in order to unlock it.

Published under: Forms | MIT License

By far, one of the most frustrating parts of dealing with browser inconsistencies has got to be forms. Some designers advocate styling form elements to match the brand of a site. Others would tell you to leave them alone entirely, so that they adhere to the native look and feel of a given operating system.

SonSpring has come up with Formalize CSS. which bridges the gap between various browsers and OS’s, taking the best ideas from each, and implementing what is possible across the board. For the most part, this means most textual form elements have a slight inset, and all buttons look consistent, including the button tag

Published under: Forms | License Free

selectList is a jQuery plugin that replaces the standard HTML multiple select element with a nicer and more user-friendly interface. The user selects a number of items from a drop-down list, and the selected items are displayed below.

Plugin features:

  • Attaches to an existing <select> element, requiring no changes to HTML code
  • Supports automatic sorting of selected items
  • Allows the use of callback functions when items are added and removed
  • Provides API functions to add/remove items
  • Supports custom animations/effects
  • Supports CSS styling
  • Lightweight — the packed version is just 3KB

The plugin works in all major browsers, including Firefox 2+, Opera 9.5+, Google Chrome, Safari 3+, and Internet Explorer 6+.

Published under: Forms | GPL License | MIT License

ezMark is a jQuery Plugin that allows you to stylize Radio button and Checkbox easily. Its very small (minified version is ~1.5kb) compared to other similar scripts. It has been tested and works on all major browsers (IE 6/7/8, Firefox, Safari, Chrome) and it gracefully degrades.

To customize the default checkbox/radiobutton image, simply change the background image (checkbox-black.png/radio-black.png) and CSS (ez-checkbox/ez-radio) and (ez-checked/ez-selected) accordingly.

Published under: Forms | MIT License

InputNotes jQuery Plugin automatically adds notes below textareas and input fields based on regex patterns. The patterns are normal JavaScript regex patterns and you are free to create and style any type of notes and note texts as you want. Note texts can contain HTML. It has been tested on IE 6 and 7, Firefox 3.5, Safari 4, Google Chrome, Opera 9.6.

Published under: Forms | License Free

Have you ever wished you could style checkboxes, drop down menus, radio buttons, and file upload inputs? Ever wished you could control the look and feel of your form elements between all browsers?

If so, Uniform is your new best friend.

Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.

Published under: Formatting | Forms

The idea of using captions on form input boxes is not new, but all previous methods of providing this functionality have a few disadvantages. The jQuery FormLabels Plugin is a result of working with hundreds of different clients, sites, and especially forms.

Every form is different, so building a uniform label generator was not an easy task.

The jQuery FormLabels Plugin has a few advantages over plugins and “tricks” with similar functionality:

  • Form label has almost the same styling as its “parent” input element
  • Labels on password input boxes look like text, not asterisks
  • Accurate label’s position regardless of size and other properties of input box
  • Simplicity: no need to change a form’s markup or CSS in order to get the labels work
  • Multiple options and methods including safemode option for legacy browsers
  • Animation
  • Cross-Browser support

Published under: Forms