Best jQuery Form Validation Plugins & Tutorials with Demo

    Seahorse : JavaScript library of Form validation

    Seahorse : JavaScript library of Form validation

    Seahorse is a JavaScript library, licensed as free software, created to simplify the use of forms, particularly to simplify the form validation.

    Provides functions to validate, convert and serialize information and functions to assign real-time validation behaviors to form fields.It can be used with any JavaScript framework, however, has a plugin to be used along with jQuery.

    Seahorse provides several functions for handling numbers, dates, times, e-mail, plains texts, alphabetics texts or alphanumerics texts, among others.All the functions are highly configurable, allowing to specify the range of valid values, illegal characters, formats, and, in the case of behaviors, responses to the events of loss of focus and a key pressed.Implements behaviors for real-time validation of form fields. The behaviors can prevent the entry of certain characters, change the appearance of an element after validate an entered value or invoke other functions that handle the event.

    igorescobar : jQuery Mask Plugin

    igorescobar : jQuery Mask Plugin

    A jQuery plugin to make field masks.Features :

    • String/Numeric/Alpha/Mixed masks.
    • Reverse Mask.
    • Data type validation.
    • Automatic maxlength.
    • Live event’s for ajax/realtime apps.
    • Callbacks.
    • On-the-fly mask change.

    QuickValidate: Building a jQuery Validation Plugin

    QuickValidate: Building a jQuery Validation Plugin

    User input is everywhere, from contact forms to sign-up formsand from surveys to complex user interfaces. Forms come in many shapes and sizes, colors and styles, but they all have something in common; validation.We’re going to build a small jQuery validation plugin based on the third concept mentioned in “The validation process”.

    This tutorial assumes that you have experience in HTML and CSS as well as some knowledge of JavaScript and jQuery.

    Complexify – jQuery Password Strength Plugin

    Complexify - jQuery Password Strength Plugin

    Complexify helps you to accurately gauge the quality of a user’s password to give them visual feedback, and to enforce a minimum level of security.Complexify aims to provide a good measure of password complexity for websites to use both for giving hints to users in the form of strength bars, and for casually enforcing a minimum complexity for security reasons.

    Note: I use the term ‘casually’ because this is only client-side validation and anyone could turn it off. I recommend implementing a minimum length check server-side as well. In the future I may code up this algorithm for use server-side.

    Happy.js : Lightweight form validation for jQuery

    Happy.js : Lightweight form validation for jQuery

    Happy.js is a lightweight form validation for jQuery.Happy.js will validate individual fields on blur events and all fields on submit.

    Yes, there a million form validation plugins already – but I like this approach and the good news is, if you don’t, you have other options. Personally I wanted something really lightweight and extendable (because it’s hard to be happy when you’re bloated).

    jq-idealforms : jQuery Ideal Forms

    jq-idealforms : jQuery Ideal Forms

    jq-idealforms is a small framework to build awesome responsive forms. It’s built on top of jQuery and LESS.

    Features:

    • Fully responsive. (aka adaptive, adapts to the container, no css media queries needed)
    • Keyboard support.
    • Customizable input types with LESS, the dynamic css language.
    • “On the spot” validation.
    • Placeholder support for every browser.

    jQuery Validation Engine with Demo

    jQuery Validation Engine with Demo

    jQuery validation engine is a Javascript plugin aimed at the validation of form fields in the browser (IE 6-8, Chrome, Firefox, Safari, Opera 10). The plugin provides visually appealing prompts that grab user attention on the subject matter.

    Validations range from email, phone, and URL, to more complex calls such as ajax processing or custom javascript functions. Bundled with many locales, the error prompts can be translated into the language of your choice.
    Rules of thumb
    * field.id are **unique** across the page
    * for simplicity and consistency field.id and field.name should match (except with minCheckbox and maxCheckbox validators)
    * spaces or special chars should be avoided in field.id or field.name
    * use lower cases for input.type ie. *text, password, textarea, checkbox, radio*
    * use the Ajax validator last ie. validate[custom[onlyLetter],length[0,100],**ajax[ajaxNameCall]**]
    * use only one Ajax validator per field!
    * JSON services should live on the same server (or you will get into browser security issues)
    * in a perfect RESTful world, http **GET** is used to *READ* data, http **POST** is used to *WRITE* data: which translates into -> Ajax validations should use GET, the actual form post should use a POST request.

    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.

    Formly – the jQuery form glamorizer

    Formly – the jQuery form glamorizer

    An unbelievably easy way to add style and validation to your forms. Forms are everywhere and, usually, suck. Formly makes adding forms to your site a bit more exciting. Easily add style, validation, and a more impressive user interaction with a single function.This is easy way to add cool looking of any your forms. Also it possible to add validation (from user side) to your forms too.

    jQuery credit card validation plugin : Smart Validate

    jQuery credit card validation plugin : Smart Validate

    Smart Validate is a jQuery credit card validation plugin, that makes credit card format validation a simple task. It ensures that user has entered valid credit card number before making actual transaction. Smart Validate supports the following credit cards.

    • American Express
    • Master Card
    • Visa Card
    • Diners Club
    • Discover

    The plugin can be easily extended to support other credit card types.