Best jQuery Forms Plugins & Tutorials with Demo

    jQuery CSS3 Strength Meter Plugin

    May 14, 2014 | CSS2 / CSS3.0, Forms, HTML5, Plugins
    jQuery CSS3 Strength Meter Plugin

    A jQuery plugin that converts a password input into an advanced widget with strength validation meter and toggle mask to show/hide the password. The password strength is validated as you type.

    Features:

    1. Convert any password input to an advanced password strength validation plugin. Will fallback to a normal password input for browsers not supporting JQuery or Javascript.
    2. The plugin will offer ability to toggle password mask (show/hide password text) and display a dynamic strength meter as you type. Uses advanced strength calculation algorithm which can be customized by setting/overriding the default validation rules.
    3. All options to the password input can be passed as HTML5 data attributes.
    4. Internationalization enabled to show messages in languages other than Englsh. At this stage translations are available for 4 languages (German, French, Italian, and Russian).
    5. Show and hide meter and/or toggle password mask.
    Read More Demo

    Html5 Bootstrap FileInput Plugin

    May 13, 2014 | Bootstrap, Forms, HTML5, Plugins
    Html5 Bootstrap FileInput Plugin

    An enhanced HTML 5 file input for Bootstrap 3.x with file preview for images and text, multiple selection, and more. The plugin enhances these concepts and simplifies the widget initialization with simple HTML markup on a file input. It also offers support for multiple file preview and previewing both images and text types.

    Read More Demo

    NumBox : jQuery HTML5 Numeric Input Plugin

    May 12, 2014 | Forms, Plugins
    NumBox : jQuery HTML5 Numeric Input Plugin

    NumBox a jQuery Html5 plugin aims to work equally well on desktops and mobile devices, and helps ensure that a numeric keyboard will pop-up on mobile devices when a number is entered. It offers both real-time validation as you type plus display formatting, and has a lot of customization options. For example, you could set up NumBox to handle a custom currency with your choice of decimal places, minimum and maximum values, currency symbol and if the symbol goes before or after the value. When displayed, (not focused for input,) the number is correctly formatted with the appropriate symbol and commas every three digits, etc. During input, as you press each key, before it is displayed, the key press is validated, so you can’t enter non-numeric characters, numbers that are greater or smaller than the allowed range, or a number with an inappropriate number of decimal places, etc.

    Read More Demo

    formtag.js : jQuery Transform a Form

    May 11, 2014 | Forms, Plugins
    formtag.js : jQuery Transform a Form

    formtag.js is a jQuery Transform a form into mutliples button tag elements.

    Read More Demo

    Politespace : jQuery Plugin Add spaces to Numeric form values

    May 10, 2014 | Forms, Plugins
    Politespace : jQuery Plugin Add spaces to Numeric form values

    Politely  is a jQuery plugin to add spaces to numeric form values to increase readability (credit card numbers, phone numbers, etc).

    Read More Demo

    jQuery Multi level Dependent Dropdown lists

    May 8, 2014 | Forms, Plugins
    jQuery Multi level Dependent Dropdown lists

    A multi level dependent dropdown JQuery plugin that allows nested dependencies. The plugin allows you to convert normal select inputs, whose options are derived based on value selected in another input/or a group of inputs. It works both with normal select options and select with optgroups as well.

    Features:

    • Apply the plugin on a select element and set dependency to one or more other input / select elements (including dependency nesting).
    • Automatically convert select inputs with class depdrop to dependent dropdowns. The plugin supports HTML5 data attributes to configure the dependent dropdown options.
    • Supports both select input with basic options and select with optgroups.
    • Automatically lock/disable the dependent dropdown until dependent results are available.
    • The plugin uses ajax call to the server to render the list of dependent options.
    • Allows a loading indicator to be displayed in dependent select until the results are fetched from the server.
    Read More Demo

    MultiFile : jQuery Multiple File Upload

    May 6, 2014 | Forms, Plugins
    MultiFile : jQuery Multiple File Upload

    MultiFile ($.MultiFile) is a non-obstrusive and crucially non-opinionated plugin for jQuery that helps your users easily select multiple files for upload.

    It helps you implement a basic interface to improve the file selection experience of your users whilst providing you, the developer, with 3 simple methods of validation: accepted extensions, number of files and total size.This plugin will never deal with the server-side implementation of your upload solution. This plugin will not upload your files.

    Read More Demo

    Build a Multi-Step Form Interface with jQuery

    May 4, 2014 | CSS2 / CSS3.0, Forms
    Build a Multi-Step Form Interface with jQuery

    Form usability is an incredibly important topic in web design. As one of the primary input interfaces provided to users, the usability of a form is essential to a good user experience.

    Today, we’re going to build a multi-part form, complete with validation and animation.

    Read More Demo

    Bootstrap FileStyle : jQuery FileStyle for Bootstrap

    April 24, 2014 | Bootstrap, Forms, Plugins
    Bootstrap FileStyle : jQuery FileStyle for Bootstrap

    Bootstrap Filestyle is a plugin for jquery-based component library could Twitter Bootstrap, used to style the file fields of the forms.

    This plugin has an interesting way to present a form for sending files so attractive, while being simple and efficient.

    Read More Demo

    Jvfloat.js : jQuery plugin to emulate Floating Placeholder Text

    April 23, 2014 | CSS2 / CSS3.0, Forms, Plugins
    Jvfloat.js : jQuery plugin to emulate Floating Placeholder Text

    jQuery and Zepto plugin to emulate the behavior of JVFloatLabeledTextField which based on the concept from Matt D. Smith.

    JVFloat uses CSS3 Transform and Transitions to perform the animations by default. Browsers that doesn’t support those will simply doesn’t show anything when user typing on the input elements. to fix that, enable/uncomment the legacy rules on the default CSS file, and comment out the CSS3 rules.

    Read More Demo