in Design

10 Very Good jQuery Validation Plugins

Using jQuery, you can simplify the client-side scripting of HTML. You can use it for everything like document traversing, event handling, animating, and Ajax interactions for rapid web development. One of the coolest thing of jQuery is the ability to create plugins.

Because of jQuery’s architecture, other developers can use its constructs to create plug-in code to extend its functionality. Currently there are thousands of jQuery plug-ins available on the web that cover a wide range of functionality such as Ajax helpers, webservices, datagrids, dynamic lists, XML and XSLT tools, drag and drop, events, cookie handling, modal windows, even a jQuery-based Commodore 64 emulator. In this article you can see 10 plugins for creating data validation.

Credit card validation

Here’s an improved credit card validation extension for the jQuery Validation plugin. This lets you pass the credit card type into the validation routine, which allows it to do card type specific checks for prefix of the card number and number of digits. This extension includes the mod-10 check (based on the Luhn Algorithm) that is used in the core creditcard validation routine. As an extra bonus, it will ignore spaces and dashes in the card number. This code was ported from this credit card validation routine by John Gardner, with some minor tweaks and additions.

jFormer

jFormer is a form framework written on top of jQuery that allows you to quickly generate beautiful, standards compliant forms. Leveraging the latest techniques in web design, jFormer helps you create web forms that: Validate client-side, Validate server-side, Validate server-side.

Ajax Fancy Captcha

Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers. We are introducing you to a new, intuitive way of completing “verify humanity” tasks. In order to do that you are asked to drag and drop specified item into a circle.

Hyjack Select

This jQuery plugin replaces the traditional html select control with an improved or “hijacked” version. To begin, try exploring the various Hyjack HTML select examples. Notice, you may now type to search for available drop down items! Please feel free to discover the demos, expand on current ideas, or just drop us a note! Documenation can be found in code behind and through google code or at our jQuery plugin page.

jQuery slideLock Plugin

slideLock adds a jQuery UI slider along with labels and notes to any form you wish as an alternative to traditional CAPTCHA. The user simply slides the form to unlock the submit button and then both client side and server side validation techniques ensure secure submission of the form.

Ajax Username Check with jQuery

The embedded javascript picks up the onblur event of the input field with id username. It then sends a post request to check.php which checks the csv for the filename and returns the result. The embedded javascript then updates the span element with id usernameResult.

Text Limiter for Form Fields

Counts down the number of chars left on a Textarea/Input fields, won’t let the user write more than allowed number of characters. When copy/paste text, it trims it to the set limit, and also has an option for slow trimming, char by char (define speed).

jQuery AlphaNumeric

jQuery AlphaNumeric is a javascript control plugin that allows you to limit what characters a user can enter on textboxes or textareas.

Auto Help

Sometimes it’s important to tell the user what’s expected of him. Especially when filling out a complicated form. This plugin uses the title attribute to display help in a separate DOM element.

Masked Input

This is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). It has been tested on Internet Explorer, Firefox, Safari and Chrome

Bogdan

Bogdan is the founder of Top Design Magazine. You can find him in Bucharest-Romania so next time you want to drink a beer there and talk about web and stuff, give him a message.