In some cases the standard HTML list box doesn’t offer a good usability like the need of scrolling or using both the keyboard & mouse.

MTMultiselect is a paginated & filterable multi-select widget built with MooTools.

The user can easily see the selected/non-selected items & can get all the functionality with only using the mouse.

The widget can be styled completely with CSS.

For a demo, click here.

jQuery UI Multiselect is a widget that converts html multiple select inputs into slicker interfaces.

It makes searching within the options possible which is very functional for large lists & selected items can be re-ordered by drag’n drops.

It can display the number of selected items & for an easier selection, there are select all/deselect all links provided.

The widget is unobtrusive & and be styled with ThemeRoller.

VanadiumJS is an intuitive-yet-powerful jQuery plugin for easy client-side validation.

It supports Ajax & regular server-side response results. The rules to be applied can be defined in 2 ways:

• JSON structure
• inline markup

Some of the default rules include:

• presence
• a special format
• numbers (integer, float)
• length
• acceptance (checkboxes)
• & much more..

VanadiumJS offers various customization settings like, ability to validate-as-you-type or validation-on-submit, waiting x seconds before validating as-you-type, etc.

Elijah Miller is sharing a very nice script, inspired from the iPhone-style-checkboxes for jQuery by Thomas Reynolds, for creating iPhone-like toggle switches with Prototype.

It is a very flexible resource as:

• variable sizes of switches are created automatically
• has support for dragging
• sliding labels
• offers iPhone compatibility

How To Use It?

It converts the visual output of a checkbox & displays the standard checkbox when JS is disabled (unobtrusive).

To make it work, calling a simple function mentioning the ID of the checkbox & values is enough:

new iPhoneStyle('#variable_size_a_b', { checkedLabel: 'A', uncheckedLabel: 'B' });

That’s all.

FormFields is a very handy resource which makes it easier to produce more usable form entry fields with ASP.NET.

Rather than writing markup over and over for things like validation, regular expressions, dropdownlist databinding, etc., FormFields handles all the hassle for you.

Here is an example date input with a date picker & validation:

<formField:textBox ID="tb_SchoolDate" runat="server" Type="Date" Required="True"  Title="School Date" />

Yes, that easy & with a clean markup (the look & feel can be customized via CSS).

FormFields requires .Net Framework 3.5 & AjaxControlToolkit to run.

pForm is a web-based & free HTML form builder application for creating good looking forms easily.

It offers various color schemes to get started & enables you to design your form with an Ajaxed interface.

Any type of form objects (text fields, checkboxes, dropdowns, file upload fields, etc.) can be added & every field can be customized (field label, type, size..).

Once the form design is completed, it can be previewed & ready-to-use HTML/CSS files can be downloaded as a .zip file.

To get amazing features like saving entries to database, input validation & much more, you can check the commercial product of the service: MachForm.

Position Absolute is sharing an easy to use form validation engine built with jQuery.

It offers a flexible way of displaying errors that will possibly match any type of form design. When the script detects an error, it creates a div, positions it at the right-top corner of the input & displays it like a tooltip with the error message inside.

Validation rules are created inside the classes of every input field like:

<input class="validate[required,custom[onlyLetter],length[0,100]]" name="first" type="text" />

It currently support rules like:

• required
• length
• telephone
• email
• onlyNumber
• onlyLetter
• & more

Also, you can define custom rules via RegEx & error messages can be localised with custom language files.

FancyUpload, the popular Ajaxed file uploader, now has new version with more features.

To remember, FancyUpload is an unobtrusive file-input replacement with multiple-file selection & queued upload with an animated progress bar.

It uses MooTools, works with the help of Swiff (a MooTools class) & as a SWF file is used for uploads, it is server-independent.

Other great features of FancyUpload:

• the look & feel can be totally customized via CSS/XHTML
• uploads can be limited with file count, file type or size
• upload speed can be displayed
• browse-button can be an invisible overlay or an interactive image sprite
• useful file information before the upload starts can be collected & many more.

The API is very flexible, offers lots of options & very well-documented.

For membership-oriented websites, registration forms are one of the most important parts. A problematic experience, even if the sign-up is completed, will place a "question mark" to the visitor or vice-versa.

And, it is also the first step where you can show that you care about the security of the website & all the data collected.

Although you can control/improve the security of the website, it is sometimes the weak passwords used that may have unwanted consequences.

Guiding users to have a strong password with the help of password strength meters, besides being an easy process, will help improving the security of the whole & show that the website pays attention to it.

Here are 10 password strength meter scripts for a better registration interface:

PasswordMeter

PasswordMeter is a JavaScript function that checks the strengths of passwords with a well-defined algorithm.

And, the website of the resource nicely displays how the strength is calculated.

Ultimate Password Strength Meter

This password strength meter is an improved version of this script. It that has a graphical interface (uses Prototype & Script.aculo.us) that shows the strength of the input.

Read the rest of this entry »

It is possible to create stylish textboxes with auto-complete feature, just like Facebook has, using plugins for jQuery & MooTools.

For jQuery:

Autobox is a jQuery plugin that makes creating textboxes with auto-complete support easier.

Values expected can be mentioned staticly or called dynamically via Ajax requests. Documentation for the plugin can be found here.

For MooTools:

TextboxList, a MooTools plugin, for creating auto-complete enabled Facebook-like inputs has a new version (see WRD post for the old version).

It can be feeded with data from any data-source easily, makes a binary search for a better performance & offers various options for maximum flexibility.