Javascript

Powerful Javascript Form Validation Plugins

Written by Kevin Liew on 19 Dec 2011
39,755 Views • Shares
3 comments

Introduction

Form validation can be a nightmare for some of us but it is a good practise to include both client-side and server-side validation. You might think it's a redundant effort, but come and think about it from the end user's point of view, client-side validation can save time and save bandwidth by allowing user correct errors on the spot without have to submit it back to the server.

Creating your own javascript form validation plugin can be a tedious process which involve planning, developing and testing. Without a good knowledge in Javascript can lead to frustration and waste of time. In this post, I found 10 already made javascript validation plugins that could save your time! They are easy to apply and designed to work well with your existing template. I have been using validate.js because of its simplicity and easy to integrate. Have you been using any of those? Or you have a different solution? Let us know what's your opinion on form validation.

  • validate.js Validate.js is a very nice JavaScript form validation library that is inspired from the CodeIgniter form validation API. The library is lightweight (~1kb gzipped), doesn't require any JavaScript frameworks and works in all major browsers (yes, including IE6).
  • Zebra Form This is something different. Zebra_Form is a free PHP library, handles this process very well and enables us to create secure and chic forms with a few lines of PHP code. However, it integrates with jQuery in the frontend to display alerts and errors,. It's worthwhile to be mentioned here.
  • jFormer jFormer, a form framework built on top of jQuery brings a complete, easy-to-use and solid solution to handling them. It enables us to build forms which are validated on client-side and server-side (PHP solution is included) with Ajax requests where users are notified in a very chic way with tooltips and CSS-styling on every level.
  • jQuery.validVal jQuery.validVal is plugin for the popular JS framework which aims to simplify form validation. It can be used for validating any kind of HTML form (including Ajaxed ones) and works by defining the rules within class names.
  • Validity Validity is a powerful and flexible jQuery form validation for making sure -on the client-side- that form values are just as expected. It is lightweight (9kb) and can perform simple to complex, dynamic and conditional validations. The plugin also gives full control over how validation messages will appear which makes it possible to match the look and feel of your site.
  • ValidForm Builder ValidForm Builder is an impressive open source form creation library that relies on PHP and JavaScript (jQuery). The library outputs standards-based web forms (XHTML 1.0 valid) that are validated both on the client-side and the server-side.
  • Ketchup Ketchup is an easy-to-customize (in means of appearance & functionality) jQuery plugin for validating user inputs on the client-side.
  • Validatious Validatious is an unobtrusive & easy to use JavaScript form validation library that does not depend on any JS frameworks. It has built-in validators like numeric, e-mail, URL, max/min char, etc. & custom ones can be created.
  • Form Validator jQuery form validator is a versatile solution that works with every form. It displays floating error tooltips whenever the validation fails.
  • VanadiumJS VanadiumJS is an intuitive-yet-powerful jQuery plugin for easy client-side validation.
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

3 comments
JL 5 years ago
Nice forms. Zebra Form has no layout in IE, but the others are solid examples.
Reply
Paul 4 years ago
Here is another one - dhtmlxForm ( http://dhtmlx.com/docs/products/dhtmlxForm/ )
Reply
Robin 4 years ago
Thanks for featuring ValidForm Builder! Hope you like it :-)
Reply