50+ jQuery Form Validation Plugins With Examples

jQuery Form Validation Plugins With Examples – Are you looking for jQuery Form Validation Plugins With Examples, If yes then in this post I am going to share hand-picked jQuery Form Validation Plugins With Examples for you. People make mistakes when they fill out forms. By validating form responses before accepting them, we can alert users to their errors before they submit the form. In this way, client side form validation can vastly improve the user experience. You can use these jQuery Form Validation Plugins in your next web based projects.

jQuery Form Validation Plugins With Examples

Following are the list of jQuery Form Validation Plugins With Examples.

jQuery Validation Plugin Template DEMO

  jQuery Validation Plugin Template

A jquery form validation demo – By julmot


Validate DEMO

  Validate

A client-side validation plugin for Twitter Bootstrap 2.3.1 – By chemoish


Angular + Material Design Lite ( MDL ) Form Validation DEMO

  Angular + Material Design Lite ( MDL ) Form Validation

Basic form with validation using AngularJS and Form Material Design Lite ( MDL ) – By alisterlf



HTML5 Form Validation DEMO

  HTML5 Form Validation

My first stab at HTML5 forms… design based on Sign In by Rogie King – http://www.dribbble.com/shots/344627-Sign-In – By clintabrown


Angular Material Datepicker validation issue DEMO

  Angular Material Datepicker validation issue

If user deletes value from Date input field an error message ‘This date is required’ is being shown which is expected behavior. The error message ‘This date is required’ is still shown to user if user enters valid date (e.g. 10/10/2000). – By _4zuko


Simple Form Validation DEMO

  Simple Form Validation

A jQuery script that simple validates forms and append classes. – By hmphry


HTML & CSS form validation using pattern RegEx DEMO

  HTML & CSS form validation using pattern RegEx

HTML & CSS form validation using pattern This example uses pattern attribute with Regular Expressions (RegEx) to validate inputs on a form. – By JesGraPa


3D Form Validation DEMO

  3D Form Validation

Fun example of interactive feedback on a form validation state using CSS3 3D transforms and jQuery – By soulrider911



AngulerJS form field validation: Digits and Characters DEMO

  AngulerJS form field validation: Digits and Characters

Simple validation of text fields to confirm input is all numerical or non-numerical. – By astockwell


CSS3 Form validation errors DEMO

  CSS3 Form validation errors

Some quick hacked form validation error ideas for the Open-Source project Mapbender3 – http://demo.mapbender3.org/ – Winner is the first one – By Vaddo


Form Validation 1 DEMO

  Form Validation 1

Simple validation through AngularJS directives. – By brunoscopelliti


The Ultimate Form Validation DEMO

  The Ultimate Form Validation

In a perfect world, all forms would have excellent front-end validation. Here is my attempt. – By solona


Email Validation Example DEMO

  Email Validation Example

– By SitePoint


Form Validation DEMO

  Form Validation

jquery form validation email validate password validate and etc… – By reza_shaban


Easy Form Validation in AngularJS with ngMessages DEMO

  Easy Form Validation in AngularJS with ngMessages

Pen for article: http://www.sitepoint.com/easy-form-validation-angularjs-ngmessages – By SitePoint



Forbidden Validation (Form Validation) DEMO

  Forbidden Validation (Form Validation)

A little fun validation script that I have implemented on a lot of my website projects. Quick, Easy, and Pretty! Spiced this design up a little with my favorite movie! – By justinbatzel


HTML5 SignIn form (with validation) DEMO

  HTML5 SignIn form (with validation)

A sign in form template in html5. Built with HTML5, bits of css3. Powered with Slim, Sass and Compass. Contains an experiment with html5 validation (no js for tooltips and validation). – By SamMarkiewicz


AngularJs Custom form input & custom form validation DEMO

  AngularJs Custom form input & custom form validation

Create custom form input and custom validation to use with ngMessages. – By SebL


Javascript Form Validation DEMO

  Javascript Form Validation

Javascript Form Validation with error message on page – By AlnoorKhan


Dynamic Password Validation DEMO

  Dynamic Password Validation

Nifty jquery password validation modified from stack exchange logic warning password fields are plain inputs – By hartzis



AngularJs: Login Form Validation DEMO

  AngularJs: Login Form Validation

This is a login form validation by Angular Js and Bootstrap – By nariman_adam


validation Form DEMO

  validation Form

Validation form with validate.js script. – By py8wn


HTML5 Form Validation – Show All Error Messages on Submit DEMO

  HTML5 Form Validation - Show All Error Messages on Submit

By default browsers only display the first error message to a user when they attempt to submit a form. This example shows how you can use the HTML5 form validation API to show them all. See http://tjvantoll.com/2012/08/05/html5-form-validation-showing-all-error-messages/. – By tjvantoll


React Component for HTML5 Form Validation with Bootstrap DEMO

  React Component for HTML5 Form Validation with Bootstrap

This is a working example of a React Form component with custom HTML5 validation errors. It wraps a usual HTML form element with the additional functionality of displaying input HTML5 validation error messages in custom containers. – By _arpy

AngularJS form validation – email & mobile number validation DEMO

  AngularJS form validation - email & mobile number validation

This pen helps you validate a 10-digit mobile number(which is used in India) and email address using ng-pattern directive, you can edit the pattern string in JS file for customizing number of digit of contact number. – By DynamicSingh


Ionic : Validation DEMO

  Ionic : Validation

– By calendee


Angular Material Datepicker and ngMask DEMO

  Angular Material Datepicker and ngMask

Sample how to integrate ngMask with Angular Material Datepicker. – By _4zuko



Form Validation w/ jQuery and CSS animation DEMO

  Form Validation w/ jQuery and CSS animation

Simple form validation with ‘shake’ effect like some Apple UIs – By ed1nh0


Form Validation with AngularJs DEMO

  Form Validation with AngularJs

AngularJs Form Validation with Example – By rakeshsharma


Brutalist Inspired Login Form with HTML5 Pattern Validation DEMO

  Brutalist Inspired Login Form with HTML5 Pattern Validation

This is an experimental Brutalist inspired login form with HTML5 pattern validation. I have made this pen responsive using the :root + calc() with rem’s method – – By nikkipantony


checkmark icon validation with bootstrap DEMO

  checkmark icon validation with bootstrap

email test validation using bootstrap, jquery and jquery validate to show a icon mark inside the text field. – By fmobiledesigns


jQuery Validate – Radio button example DEMO

  jQuery Validate - Radio button example

– By prasanthmj



Javascript form validator DEMO

  Javascript form validator

Form validation on native javascript. – By dhs


Week 02 – Assignment 1 DEMO

  Week 02 - Assignment 1

CSS Selectors & Validation – By IMD


jquery validator multiple form on one page DEMO

  jquery validator multiple form on one page

jquery validator plugin, multiple form validation, jquety validation multiple form on one page – By yashwant


Dynamic Form Validation v0.2 DEMO

  Dynamic Form Validation v0.2

SUMMARY This Pen utilises the jQuery validate plugin, along with the extensions provided in the “additional methods” complimentary plugin, to dynamically assign validation rules and custom error messages to the required input fields. – By ianovenden


Zaclee.net – Vee-Validate Passsword Confirm Tutorial DEMO

  Zaclee.net - Vee-Validate Passsword Confirm Tutorial

– By zschuessler


Test your Regular Expression validation rules DEMO

  Test your Regular Expression validation rules

This text field is a test for Regular Expression validation. Enter yousr RegEX and start typing in your test password. – By netsi1964


Bootstrap Validator Plugin Demo DEMO

  Bootstrap Validator Plugin Demo

A jquery validation plugin – By julmot



Real Time Form Validation Boilerplate DEMO

  Real Time Form Validation Boilerplate

– By ire


onblur form validation example DEMO

  onblur form validation example

– By merb


CSS3 validation in/out animations DEMO

  CSS3 validation in/out animations

Some form validation animation ideas for the Open-Source project Mapbender3 – http://demo.mapbender3.org/ – Winner is the first one – By Vaddo


Jquery Validate Plugin Modal Form DEMO

  Jquery Validate Plugin Modal Form

– By tetnuc


Progressive Form Fields DEMO

  Progressive Form Fields

Fill out one field in a valid way to enable the next. UI/UX exercise to cut back on partial form completions. – By designcouch



Validation rules jQuery plugin DEMO

  Validation rules jQuery plugin

Inspired by http://aerotwist.com/blog/better-password-form-fields/ Fork here: https://github.com/easy-designs/jquery.easyValidationRules.js – By aarongustafson


Vue Email Validator DEMO

  Vue Email Validator

Validates email addresses using Vue.js and regex. – By CSWApps


Simple Chat Conversation DEMO

  Simple Chat Conversation

– By MariamMassadeh


Dynamic Phone Number Validator DEMO

  Dynamic Phone Number Validator

Dynamically validate international phone numbers (needs to include country code). Submission only possible when a valid number has been entered. – By sdnyco


HTML5 form validation w jQuery ajax POST DEMO

  HTML5 form validation w jQuery ajax POST

a simple impl of a web form that uses built-in HTML5 validation, but submits the form using ajax, inside a jQuery click-event handler, instead of the default HTTP post request vis a vis the form tag. – By nickleus


Form Validation DEMO

  Form Validation

After entering the required fields the button then becomes enabled, otherwise preventing the user from submitting a blank or not properly filled out form. – By davidchase


Valid Elements DEMO

  Valid Elements

This example shows you how to use the extended_valid_elements option, enabling you to specify valid elements and attributes. – By tinymce



Bootstrap Login w/jQuery Validate DEMO

  Bootstrap Login w/jQuery Validate

Working on a little login screen using jQuery validate, Bootstrap, and adding accessibility functionality. – By joe-watkins


Bootstrap 4 Multi-Step Form DEMO

  Bootstrap 4 Multi-Step Form

Multi-Step form with validation – By Thumper


Multi Step Form with JS Validation & SPAM Blocker DEMO

  Multi Step Form with JS Validation & SPAM Blocker

Forked from Atakan Goktepe’s Pen Multi Step Form with Progress Bar using jQuery and CSS3. – By wortmann


Form Validation DEMO

  Form Validation

Form validation routine, Using HTML5 attributes combined with fancy CSS3 effects and Jquery to dynamically validate any field which may be “required” – By Nexty


Jquery validation without form submit DEMO

  Jquery validation without form submit

JQuery.validate.js validates the input form only after clicking the submit button. This example forces validation during the input and errors if any validation failed before even form is submitted. – By santhudr



CSS :valid and :invalid pseudo-classes DEMO

  CSS :valid and :invalid pseudo-classes

The :valid and :invalid pseudo-classes target form elements whose formatting is correct/incorrect according to that element’s required format. – By ricardozea


Native HTML5 validation with CSS & Regex DEMO

  Native HTML5 validation with CSS & Regex

An example of using CSS :invalid pseudoselector with the HTML5 pattern attribute for form validation with inline error messages – By helgesverre


Floating Labels w/ ParsleyJS DEMO

  Floating Labels w/ ParsleyJS

My take on floating labels with ParsleyJS form validation baked-in – By zslabs


Front-End Form Validation DEMO

  Front-End Form Validation

This form uses HTML5 form validation, including the email input type and the required & pattern attributes to validate length and required characters in the password fields. It also uses the oninput event and the setCustomValidity() function to match up the “password” and “confirm password” fields. – By peiche


I Hope you liked Hand-picked list of jQuery Form Validation Plugins With Examples, Don’t forget to Subscribe My Public Notebook for more useful Hand-picked HTML and CSS code examples, tutorials and articles.