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:

  • jQuery jCarousel Plugin
  • jQuery library
  • jQuery LightBox Plugin
  • Cached thumbnail Script
  • Form Cloning jQuery Plugin
  • How to easily integrate a PayPal Checkout with PHP

Leave a Comment

Posted Comments

jdmweb
No comments have been posted so far. Be the first!
From jdmweb at 19:06 29/07/10 { Reply }