jQuery Form Validation Plugin

The jQuery validation plugin allows you to perform client side form validation, to ensure that all the required data are effectively entered by the user without submitting the form. It's a very powerful plugin with many ways of customization to match your needs. Source and © Jörn Zaefferer.
  • Previous Resource
  • Download
  • Next Resource

Demonstration

How to setup

This plugin requires 2 files to work, the jQuery library, and the plugin script:

  1. /** jQuery Inclusion **/
  2. <script type="text/javascript" src="Path_to/jQuery.js"></script>
  3.  
  4. /** Plugin Inclusion **/
  5. <script type="text/javascript" src="Path_to/jquery-validate.js"></script>

As this plugin works with forms, the next step is to create your form markup, and to add the class='required' to every field you want to validate before submit (input,select,textarea...).

  1. <form id="formid" action="" method="POST">
  2.  
  3. <label for="field1">Compulsory Field 1</label>
  4. <input id="field1" name="field1" class="required" />
  5.  
  6. <label for="field2">Compulsory Field 2</label>
  7. <input id="field2" name="field2" class="required" />
  8.  
  9. <label for="field3">Compulsory Field 3</label>
  10. <input id="field3" name="field3" class="required" />
  11.  
  12. <input id="valid_submit" name="valid_submit" type="submit" />
  13. </form>

Finally, to set up the validation, you need to add the following code in the header or in a separate js file:

  1. <script type="text/javascript">
  2. // Plugin use
  3. $(document).ready(function(){
  4. $("#formid").validate();
  5. });
  6. </script>

Please note that the form id must be the same in the html and in the javascript.

S_ADD_BACKEND_VALIDATION

Why not share this here:

  • Tweet this
  • Buy the author a coffee
  • Bump this
  • Digg this
  • Post this on Del.icio.us
  • Post this on StumbleUpon
  • Post this on Reddit
  • Post this on Technorati
  • Post this on Google
  • Post this on Facebook
  • Email this to a friend

You may also like:

  • Cached thumbnail Script
  • Creating a simple image gallery with PHP & jQuery
  • Form Cloning jQuery Plugin
  • How to make SEO friendly urls
  • How to turn any jQuery plugin into a WordPress one
  • jQuery jCarousel Plugin

Posted Comments