Best jQuery Forms Plugins & Tutorials with Demo

    igorescobar : jQuery Mask Plugin

    igorescobar : jQuery Mask Plugin

    A jQuery plugin to make field masks.Features :

    • String/Numeric/Alpha/Mixed masks.
    • Reverse Mask.
    • Data type validation.
    • Automatic maxlength.
    • Live event’s for ajax/realtime apps.
    • Callbacks.
    • On-the-fly mask change.

    QuickValidate: Building a jQuery Validation Plugin

    QuickValidate: Building a jQuery Validation Plugin

    User input is everywhere, from contact forms to sign-up formsand from surveys to complex user interfaces. Forms come in many shapes and sizes, colors and styles, but they all have something in common; validation.We’re going to build a small jQuery validation plugin based on the third concept mentioned in “The validation process”.

    This tutorial assumes that you have experience in HTML and CSS as well as some knowledge of JavaScript and jQuery.

    Complexify – jQuery Password Strength Plugin

    Complexify - jQuery Password Strength Plugin

    Complexify helps you to accurately gauge the quality of a user’s password to give them visual feedback, and to enforce a minimum level of security.Complexify aims to provide a good measure of password complexity for websites to use both for giving hints to users in the form of strength bars, and for casually enforcing a minimum complexity for security reasons.

    Note: I use the term ‘casually’ because this is only client-side validation and anyone could turn it off. I recommend implementing a minimum length check server-side as well. In the future I may code up this algorithm for use server-side.

    ddSlick : jQuery plugin for custom Drop down with images

    ddSlick : jQuery plugin for custom Drop down with images

    A free light weight jQuery plugin that allows you to create a custom drop down with images and description.

    What is so cool about this plugin!

    • Adds images and description to otherwise boring drop downs.
    • Allows JSON to populate the drop down options.
    • Converts your HTML select element to ddSlick.
    • Uses Minimum css and no external stylesheets to download.
    • Supports callback functions on selection.
    • Works as good even without images or description!

    Happy.js : Lightweight form validation for jQuery

    Happy.js : Lightweight form validation for jQuery

    Happy.js is a lightweight form validation for jQuery.Happy.js will validate individual fields on blur events and all fields on submit.

    Yes, there a million form validation plugins already – but I like this approach and the good news is, if you don’t, you have other options. Personally I wanted something really lightweight and extendable (because it’s hard to be happy when you’re bloated).

    Create an Upload Form using jQuery, CSS3, HTML5 and PHP

    Create an Upload Form using jQuery, CSS3, HTML5 and PHP

    In this tutorial we will code an Upload Form from Impressionist UI. We will code it using the Plupload API. Plupload allows you to upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms, providing some unique features such as upload progress, image resizing and chunked uploads. This way we are able to create a very powerful upload form compatible with all browsers. So let’s get started

    TabSelect jQuery Plugin

    TabSelect jQuery Plugin

    A plugin to select one or more array or form entries visually, for example to filter a list or replace a multiselect form element.If you toggle an option, the text changes automatically, in other words, you can use that text field in a form to submit the selection. In such a case you would of course hide the text field first.

    You’re completely free to style your elements. Default setting for the tabs is a span element, but you can change that in the settings (check the plugin source, the default settings are right at the top).

    jQuery Stylish checkbox

    jQuery Stylish checkbox

    Lightweight custom styled checkbox implementaion for jQuery.
    Features:

    1. only inline elements used, just like default checkoxes
    2. cross-browser look and feel (tested in IE6, IE7, IE8, Firefox and Chrome engines)
    3. work with radio buttons too
    4. supports inline and jQuery attached click events
    5. supports “label hovering”: when you point over parent label element, it will highlight its checkbox (thanks to Eugene for the idea)
    6. dynamic skin changing
    7. adds new checkbox events “check”, “uncheck”, “disable”, “enable”, ready to use in jQuery.bind() method

    ALAJAX : jQuery Form to AJAX converter

    ALAJAX : jQuery Form to AJAX converter

    A jQuery plugin that converts a normal HTML form into ajax by only including the script.
    It sends the form by AJAX to the URL given in “action” property of the form. Also, the plugin uses the “method” property to use POST or GET method.Convert HTML forms into AJAX with jQuery with following features :

    • Converts forms into AJAX simply.
    • No programming background needed.
    • Works with Dynamic Forms (forms that is updated by Javascript)
    • Lightweight code (3KB uncompressed).
    • Easy to understand and to modify.
    • Cool for Developers, designers and website ownsers.

    Select2 : jQuery based replacement for select boxes

    Select2 : jQuery based replacement for select boxes

    Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. Look and feel of Select2 is based on the excellent Chosen library.