In this tutorial we’ll be utilizing the localStorage mechanism to store the current state of a form. This means that when the page is reloaded or the user re-opens the page after closing it the form will be populated with the previous values. For improved complexity, we’ll be storing the data as serialized JSON strings.
Best jQuery Forms Plugins & Tutorials with Demo
cbFamily : jQuery Checkbox group (parent/children) functionality
Checkbox group (parent/children) functionality. Makes a checkbox parent of other checkboxes.
- If the parent is clicked the children are checked/unchecked based on the parent.
- If all the children are checked, parent gets checked too.
- If there is an unchecked item in the children and if the parent is checked, it gets unchecked.
childrencan be a function. In this case, that function is run agaist the parent in order to find the children. This is useful for groups of checkboxes.- Checks/unchecks parent based on the initial status of its children at start.
Form Character Limit Animation using jQuery and CSS
I was recently playing around with form validation and using css to animate cool things, but then I stumbled across character limit. You can easily use jQuery to access parameters like an input field’s character limit and current character limit. So I tried creating a simple animation that showed as you were typing in a field how many characters you had left. I opted for a simple design where there is just a grey bar underneath the input field and it fills up as you type in characters and changes colors as you get closer to the limit.
FFForm : jQuery Contact Form Plugin with Validations & Amazing CSS3 Animation
The ‘Contact’ form on your website is like your door to rest of the world in the cyberspace. It is the easiest way for website visitors to drop a line and start the conversation.FFForm is a simple jQuery plugin that can be integrated in any website layout to provide a fully functional contact form. Built with jQuery and CSS, FFForm is compatible with all modern web browsers and mobile devices. It also provides various customization options including animations, field validation and notifications.
Features:
- AJAX Enabled
- Cross-Browser Compatible
- Data Validation
- Custom handlers for events like onValidation, onSuccess and onError etc.
- Various Animation Styles
jQuery formHelp
Providing contextual help in a standard HTML form requires all kinds of extra HTML and CSS (and JavaScript if you want it to play nice with the user). This plugin gives you an easy way to place contextual help at every input field in a form. All you have to do is insert a span element with the helptext and a reference to the corresponding input field and this plugin does the heavy work for you.
Passy : jQuery plugin to Rate and Generate Passwords
A jQuery plugin to rate and generate passwords.You cant emphasize the importance of good passwords. To make it easier for developers to give good feedback on a password, I’ve created passy.
Features:
- Analize and validate a password real-time
- Looks at lowercase, uppercase, numbers, punctiation and foreign characters (eg. ü, ö, etc)
- Compares password with patterns
- Able to compare password with a dictionary
- Password generation
- Customizable properties
- Utility functions
