Best jQuery Form Validation Plugins & Tutorials with Demo

    jQuery Validation Bootstrap Tooltip

    jQuery Validation Bootstrap Tooltip

    A drop in extension replacing error labels from jQuery Validation plugin with Twitter Bootstrap tooltips.

    Smart Forms with jQuery Html5 & CSS3

    Smart Forms with jQuery Html5 & CSS3

    Smart Forms is a responsive professional Form Framework / pack with a clean consistent Form UI. The framework includes a variety of form Widgets such as Datepickers, Timepickers, Monthpickers, Colorpickers, Numeric Steppers, UI Sliders, Google maps, toggle switches validation, masking among other features.

    Features:

    • Multiple form inputs
    • File inputs / uploaders
    • CSS3 checkboxes + Radios
    • CSS3 toggle switches
    • CSS3 review & rating
    • Tooltips + vector icons
    • Notification alerts
    • CSS3 multi shape buttons
    • Animated progress bars
    • Simple pricing tables
    • Ajax form processing
    • Input masking
    • PHP CAPTCHA with refresh support
    • 40+ starter templates included
    • Date & time picker widgets

    jQuery.bank : Build and validate bank account forms

    jQuery.bank : Build and validate bank account forms

    A jQuery plugin for building bank account forms, formatting and validating inputs.Validates a given number as a bank account field field in country countryCode. It returns if it is valid and false if it is invalid.

    Note that validation is designed to detect accidental errors. In other word, if the validation test says the number is invalid, it is 100% incorrect. However, if the test says the number is valid, there is a chance that the number is incorrect.

    Form Character Limit Animation using jQuery and CSS

    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

    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 and PHP powered Easy Form

    jQuery and PHP powered Easy Form

    Looking for a simple contact form that has nice, user friendly validation? You’ve found it.This form loves validation. All fields (except for Company) are all validated through jQuery and PHP. JavaScript mainly for normal users who just love to fill in forms (and to save sending unnecessary requests to the server). PHP validation for those who love to try to break forms or just simply have JS disabled.

    Features:

    • jQuery animation for validation rules.
    • JavaScript validation so no page reload! Saves bandwidth.
    • PHP validation if the user has JavaScript disabled the form will still validate.
    • Field specific validation, phone requires numbers, email requires a valid email format etc.
    • Anti spam measures (captcha) to deter spam emails. Easy to read.
    • Very easy to implement into an existing HTML or PHP web page. ‘Plug in and Play’ – Simply change the email address and place on your page.
    • Thank you message animation on submission.
    • Error message animation without reloading the page on submission attempt.
    • Customise the HTML email message that is sent

    jQuery Steps : A powerful jQuery wizard plugin

    jQuery Steps : A powerful jQuery wizard plugin

    jQuery Steps is a smart UI component which allows you to easily create wizard-like interfaces. This plugin groups content into sections for a more structured and orderly page view. Furthermore, it is as simple as 1-2-3 to add plugins such as jQuery Validation which can prevent step changing or submission. Check out the demos and get a first-hand impression!

    Features:

    • HTML5 and Accessability support
    • Async (AJAX) content loading
    • Form validation made easy
    • Embedded iframe content
    • Cool transition effects
    • Keyboard navigation
    • Simple Step Manipulation
    • Multiple wizards in one page
    • Easy Navigation
    • State Persistence *

    Responsive HTML5/jQuery Sign In/Registration Form

    Responsive HTML5/jQuery Sign In/Registration Form

    Responsive HTML5 Sign In / Registration form, with jQuery effects and CSS3 customization.

    Features:

    • it is compatible with all major browsers (IE8, IE9, IE10, Chrome, Mozilla Firefox, Opera, Safari)
    • really easy to use and to integrate into your website
    • cool effects
    • html5 custom validation
    • responsive layout
    • really easy to modify (100% CSS customizable)