Table of Contents
If you need to display content within a limited amount of space or you just want to make a section of your website more engaging, jQuery is an excellent solution.
jQuery has changed the way developers write JavaScript and the way users interact with websites and web applications. This post includes 41 amazing jquery plugins for form functionality, validation, security and customization.
Form Time and Date Pickers
jQuery.timepickr.js
jQuery.timepickr.js has been developed in a attempt to make the process of inputing time in a form as easy and natural as possible.
DatePicker
DatePicker is a feature rich and easy to customize plugin that allows for single, multiple or range selection dates.
jQuery datePicker
This is a clean, flexible and unobtrusive plugin for jQuery which allows you to easily add date inputing functionality to your web forms and pages.
jQuery Week Calendar
The jQuery Week Calendar plugin provides a simple and flexible way of including a weekly calendar in your application and has been inspired by other online weekly calendars such as Google calendar.
Form Auto-Suggest
AutoSuggest
AutoSuggest is a lightweight jQuery plugin that will will dynamically create all the HTML elements that is needed for turning any regular text input box into an auto-complete box.
Autocomplete
By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.
FaceBook Like jQuery and autosuggest Search Engine
FaceBook Like is a powerful jQuery plugin that transform an input field into a real time auto completion search engine, designed, as the name suggests, similiar to the one on Facebook.
Form Validation Plugins
A jQuery inline form validation, because validation is a mess
When an error needs to be displayed, this script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The rounded corners and shadows are pure CSS3 and degrade well in non compliant browsers.
Validation
The Validation plugin is one of the oldest jQuery plugins (started in July 2006) available that has proved itself due to reliabilty, ease of use and extensive docs.
Highly Customizable Yet Simple Form Validation
With this highly customizable plugin the user can set his own class to define the rule, set events onError and OnValid for a particular class and you can also add their own effects, may be jquery animate().
LiveValidation Validation as you type
LiveValidation is a small open source javascript library for making client-side validation quick, easy, and powerful. It comprises of two main parts. Firstly, it provides developers with a rich set of core validation methods, which can also be used outside the context of forms. Secondly, it provides your visitors with real-time validation information as they fill out forms, helping them to get it right first time.
Ketchup Plugin
Ketchup Plugin is a slim jQuery Plugin that validates your forms. It aims to be very flexible and extendable for its appearance and functionality.
jTip The Jquery Tool Tip
jTip pulls content into a tool tip using the HttpXMLRequest object. By adding a class attribute value of jTip to a link element you can create a tooltip from the content found in the file the href is pointing too.
jQuery Live Form Validation
This plugin helps you to easily create form validations with high flexibility and is a packaged with a huge set of options.
Valid8 An input field validation plugin
Valid8 solves both simple and complex validation scenarios. Everything from a basic required field to regular expressions, ajax requests and arbitrary javascript functions.
jVal jQuery Form Field Validation Plugin
jVal is a jQuery form field validation plugin that provides an appealing animated message flyout that doesn’t impede form layout/design while being user-friendly.
Form Skinning and Customisation
jQuery Checkbox
The jQuery Checkbox plugin is a lightweight custom styled checkbox implementation that can also work with radio buttons.
In-Field Labels jQuery Plugin
This is a simple plugin that turns properly formatted HTML forms into forms with in-field label support. Labels fade when the field is focussed and disappear when text entry begins. Clearing a field and leaving brings back the label.
Niceforms
Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.
prettyCheckboxes
prettyCheckboxes is for developers who wants to maintain a consistent style for checkboxes across all browsers. By using this script you wont loose any regular input usability.
Form Select and Combo Boxes
jquery.combobox
jquery.combobox is an unobtrusive way of creating a HTML type combobox from a existing HTML Select element(s).
JavaScript Image Combobox
The fully skinnable Image Combobox plugin allows you to add an icon with each option that works with your existing “select” element.
SelectBox Plug-in
Two Sided Multi Selector
This plugin converts a multi select list into a two-sided multi-select list. This means you display a list of options in the left hand box and items you select are moved into the right hand box.
flexselect
flexselect takes the select box, and creates a hidden input element to track the associated value and creates a text input for the selection. It uses the LiquidMetal scoring algorithm to narrow the selection.
Form Functionality Plugins
Elastic Make your textareas grow
This jQuery plugin makes your textareas grow and shrink to fit it’s content. It was inspired by the auto growing textareas from Facebook.
jQuery Highlight Plugin
Highlight increases usability of forms by highlighting the elements as you interact with the page. Its primary use is for forms, but it can also be used for tables, lists, or any element that you specify.
Autotab: jQuery Auto-Tabbing and Filtering
Autotab is a jQuery plugin that provides auto-tabbing and filtering on text fields in a form. Once the maximum number of characters has been reached within a defined text fields, the focus is automatically set to the defined target of the element.
Ajax Fancy Captcha
Ajax Fancy Captcha helps you protect your web pages from bots and spammers by using a new, intuitive way of completing “verify humanity†tasks. In order to do that you are asked to drag and drop a specified item into a circle.
jQuery NobleCount
NobleCount gives you a dynamic display of the number of characters remaining in a textarea, Twitter-style.
Password Strength Indicator and Generator
The Password Strength Indicator and Generator plugin lets you set the class of an element so that you can do a graphical representation of the strength.
Sliding Labels jQuery Form Plugin
FormToWizard Plugin
The FormToWizard plugin allows you to turn any form into a powerful wizard with jQuery with “steps left” information.
ToggleVal
ToggleVal gives you the option to populate the default text of form fields (in a few different ways), and will then toggle the default value when the field receives and loses keyboard focus.
jQuery AlphaNumeric
jQuery AlphaNumeric is a javascript control plugin that allows you to limit what characters a user can enter on textboxes or textareas.
Form Encyription and Password Security
jCryption
jCryption is a JavaScript HTML-Form encryption plugin, which encrypts the POST/GET data submitted by forms. Normally, when you submit a form, data will be sent in plain text if no SSL is used. But SSL is not supported by every webhost nor it’s easy to install/apply at times. So in this situation the jCryption plugin helps you to encrypt your data with ease.
Password Strength Estimates brute force time
Password Strength tries to calculate how many possibilities the hacker needs to try to guess your password. It makes the assumption that it is possible to test 2800 million passwords per second.
Password Strength Meter v2
The Password Strength Meter works by presenting a global variable score and at the end of the algorithm the plugin will decide the passwords strength according to the score value.
Form Mask Plugin
Masked Input Plugin
The Masked Input Plugin allows a user to easily enter fixed width input fields where you would like them to enter the data in a certain format (dates,phone numbers, etc).
autoNumeric()
autoNumeric() is a flexible International numeric formatter, that will automatically place a thousand separator as you type and supports nine different rounding methods.
UI/UX Consultant, Photoshop, XD, SketchApp, Product Designer, Website Designer, Mobile App Designer, Expert WordPress Developer. For web/mobile design and wordpress development related projects please contact me at dibakar@themepurpose.com