Home
:
News And Articles
:
Javascript Jquery
:
Form Validation With Jquery Protect Your Forms

Form validation with jQuery: protect your forms

Written by Joe on Monday, September 27, 2010

Protect your forms with jQUery validation

There are a number of ways to protect your forms from spam. And if you have read anything about protecting your forms, you know that validation is key. Not only should you validate your forms on the server side with PHP or ASP or whatever language you are using, you should also validate on the client side using javascript. This article is an introduction to the jQuery validate plugin.

Getting started

First and foremost, you're going to need a copy of the jQuery javascript library. Next, you'll need a copy of the jQuery validate plugin. Download both of the plugins, unzip, and add the files to your web directory.

Including the libraries

Next, you need to include the javascript libraries on your page. In the <head> section of your website, you will need these 2 lines:
<script src="/your/path/to/jquery.js" type="text/javascript"></script>
<script src="/your/path/to/jquery.validate.js" type="text/javascript"></script>

Pretty easy so far right? Now we can start to get to the good stuff.

The jQuery

In the <head> section of your document, below the 2 lines above, add this line:
<script type="text/javascript">
$(document).ready(function(){
$("#yourFormId").validate();
});
</script>

The line $("#yourFormId").validate(); is telling the validate plugin to validate the form with the id of "yourFormId".

The HTML

Here you have a basic HTML form. Notice the ID attribute of the <form> element. This is very important. Also notice the class "required" on all of the form elements. This tells the validation plugin to make sure these items have a value before submitting. If you notice the class on the email field, "email required", this is telling the plugin that this field needs to have a valid email address.

<form id="yourFormId" method="get" action="">
<fieldset>
    <legend>A simple comment form with submit validation and default messages</legend>

    <p>
      <label for="cname">Name</label>
      <em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
    </p>

    <p>
      <label for="cemail">E-Mail</label>
      <em>*</em><input id="cemail" name="email" size="25" class="email required" />
    </p>

    <p>
      <label for="ccomment">Your comment</label>
      <em>*</em><textarea id="ccomment" name="comment" cols="22" class="required"></textarea>
    </p>

    <p>
      <input class="submit" type="submit" value="Submit"/>
    </p>
</fieldset>
</form>

And that's all. Simple jQuery form validation. All you need is 1 line of javascript and a class on each of the forms you want to validate and you're done. If you need help setting up javascript form validation on your website, contact us.