Best jQuery Forms Plugins & Tutorials with Demo

    jQuery plugin: Simplest character count for textareas & input fields

    jQuery plugin: Simplest character count for textareas & input fields

    The best way to explain what this plugin does is to mention Twitter. Twitter posts are limited to 140 characters. While typing the Twitter post there is this always present information about how many characters the users have before reaching the limit. The information is not only provided merely by displaying a number, there are different colors applied to certain stages to notify the user about the status.

    The first thing that this plugin do is create a sibling element (it adds is immediately AFTER the form element), the “counter”, where the remaining character info is stored. On each key up event or text field value change the counting function is triggered and the contents of this “counter” element is changed accordingly. If the remaining character count reaches the “warning” zone (gets close to zero) the CSS class is added. We use this class to change the color of the character count info. If the count reaches zero and goes beyond it another class is added so we can use another style for exceeding the limit.

    Ajax Upload : jQuery File uploader with progress-bar,drag-drop Feature

    Ajax Upload : jQuery File uploader with progress-bar,drag-drop Feature

    Ajax Upload; A file upload script with progress-bar, drag-and-drop.Use AJAX Upload to upload multiple files without refreshing the page and style upload button as you wish.This plugin uses XHR for uploading multiple files with progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden iframe based upload in other browsers, providing good user experience everywhere.

    jQuery Autosize with Demo

    jQuery Autosize with Demo

    jQuery Autosize is a plugin to enable automatic height for textarea elements.Small jQuery plugin to allow dynamic resizing of textarea height, so that it grows as based on visitor input. To use, just call the .autosize() method on any textarea element.

    bsmSelect : Better jQuery Select Multiple with Demo

    bsmSelect : Better jQuery Select Multiple with Demo

    A progressive enhancement to select multiple form elements using jQuery that makes it much easier to use. This enhancement automatically hides the original select multiple, and instead presents a regular select showing the available options, and an HTML list showing the already-selected options. While hidden, the original select multiple is updated as the user makes changes.

    No Ctrl/Cmd-Clicking is necessary to select multiple items, and an accidental click is not destructive. You add or remove items one at a time. Only the already-selected items occupy screen real estate, as they should. A remove link is included with each selected item, which eliminates ambiguity. Viewing and choosing a new item to add requires clicking on the select. This action is inherently more familiar, and displays many more available options at once, than a select multiple. More is seen at a glance and less scrolling (if any) is required to see all available options.Optionally, this type of select is sortable, giving it hierarchy. The user can drag and drop the items to the desired order.

    File Upload Progress Bar with jQuery and PHP

    File Upload Progress Bar with jQuery and PHP & Demo

    In this tutorials we tell how to create file upload progress bar with PHP and jQuery. In this post we had developed few lines of code using PHP APC library, it is very simple getting the server file upload process every few second and increasing the bar color using jquery css property. Just take a look at this demo.

    Webshims Lib : jQuery Polyfill loading Library with Demo

    Webshims Lib : jQuery Polyfill loading Library with Demo

    HTML5 forms/Web Forms 2.0 widgets and constraint validation API.Webshims Lib is a modular capability-based polyfill-loading library, which focuses on accurate implementations of stable HTML5 features, so that developers can write modern, interoperable and robust code in all browsers. It is built on top of jQuery and Modernizr.

    jQuery Dirty Forms : Save your users from losing their data

    jQuery Dirty Forms : Save your users from losing their data with Demo

    Dirty Forms is a flexible jQuery plugin to help prevent users from losing data when editing forms.

    Dirty Forms will alert a user when they attempt to leave a page without submitting a form they have entered data into. It alerts them in a modal popup box, and also falls back to the browser’s default onBeforeUnload handler for events outside the scope of the document such as, but not limited to, page refreshes and browser navigation buttons.

    jQuery.validity : A plugin for powerful client-side form validation

    jQuery.validity : A plugin for powerful client-side form validation

    jQuery.validity is a jQuery plugin for powerful, accurate client-side form validation. It is well-organized, versatile and can easily tackle any validation problem.You can use to setup client-side form validation. Instead of writing validation manually or balancing some unwieldy server-side framework, validity allows you to design client-side validation in a manner that feels natural and straightforward.

    jQuery.validity takes advantage of jQuery’s selector engine to perform validation on logical groupings of inputs, making it declarative and clean. This means that the inputs on a page can be added, removed, or changed and validation will still work without reconfiguration.

    jQuery.validity is designed to give you total control over how validation messages appear, so you can easily adapt the way validation errors are displayed to the look and feel of your site.

    jQuery UniqueField plugin with Demo

    jQuery UniqueField plugin with Demo

    jQuery UniqueField plugin is ajax based tool who check availability of usernames, email addresses or etc. Use in your register, sign up or other forms.

    jQuery Selectbox plugin with Demo

    jQuery Selectbox plugin with Demo

    Custom select box replacement inspired by jQuery UI source.