Home arrow AJAX & Prototype arrow Page 2 - Protecting Web Forms with AJAX

Developing a verification code mechanism - AJAX

Are you looking for a new way to protect your web forms from malicious hackers and spam bots? Then you've come to the right place. In this four-part article series, you'll learn how to use Ajax to protect those forms. Keep reading to learn how to build an Ajax-based verification code mechanism that you can use on your own web site.

  1. Protecting Web Forms with AJAX
  2. Developing a verification code mechanism
  3. Generating verification codes with Ajax
  4. Generating verification codes on the web server
By: Alejandro Gervasio
Rating: starstarstarstarstar / 8
March 18, 2009

print this article



Since my plan here will consist of demonstrating how to build a verification code generator with Ajax, which can be easily coupled to an existing HTML form, the first step we must be take is creating the form in question.

Thus, with that idea in mind, below I included the signature of a simple (X)HTML file. It contains a basic web form for implementing the checking code generator. Here’s how this brand new sample file looks:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Ajax-based Random Code Generator System</title>

<style type="text/css">


padding: 0;

margin: 0;

background: #fff;



font: bold 16pt Arial, Helvetica, sans-serif;

color: #000;



font: bold 9pt Arial, Helvetica, sans-serif;

color: #000;



width: 380px;

text-align: right;

padding: 10px;

background: #eee;



font: bold 18pt Arial, Helvetica, sans-serif;

color: #00f;



width: 300px;

border: 1px solid #999;



width: 50px;

border: 1px solid #999;





<h1>Ajax-based Random Code Generator System</h1>

<div id="formbox">

<form action="check_form.php" method="post">

<p>First Name <input type="text" class="inputbox" title="Enter your first name" /></p>

<p>Last Name <input type="text" class="inputbox" title="Enter your last name" /></p>

<p>Email <input type="text" class="inputbox" title="Enter your email address" /></p>

<p>Enter your comments below:</p>

<p><textarea title="Enter your comments" rows="10" cols="10"></textarea></p>

<div id="codebox"></div>

<p>Verification Code: <input type="text" name="code" class="checkingcode" title="Enter the above four-digit verification code" /></p>

<p><input type="submit" value="Send Data"></p>





As you can see, the above (X)HTML file includes a typical HTML contact form, where users will be able to enter their first and last names, and their email addresses. Also, there are a few additional CSS styles that are useful for improving the look and feel of the web form.

As you may have noticed, there’s another input box labeled “code,” which will let users manually enter the corresponding verification code. As I said in the introduction, this code will be generated via an HTTP request triggered with Ajax. But in fact I’m getting ahead of myself, since the details of this process will be discussed in the next section.

All in all, at this point I've created a primitive web form that, in its current state, is pretty vulnerable to attacks from any spam robot. Thus, it’s time to make it a bit safer by means of the code checking generator mentioned previously.

Thus, to see how this Ajax-driven program will be developed, please click on the link that appears below and keep reading.

>>> More AJAX & Prototype Articles          >>> More By Alejandro Gervasio

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Best AJAX Tutorials for Forms
- The Best AJAX Tutorials
- 8 Great Ajax Tutorials
- Using Ajax and jQuery
- Using Ajax and jQuery with HTML Forms
- Ajax.org Offers Cloud9 IDE for JavaScript
- Java Technologies Provider ICEsoft Releases ...
- Using Recaptcha in AJAX Prototype Framework ...
- Google's Closure Compiler Service API: Addit...
- Installing Google Web Toolkit: Introducing t...
- Google's Closure Compiler Service API: Displ...
- Google's Closure Compiler Service API: Deliv...
- Google's Closure Compiler Service API: the A...
- Google's Closure Compiler Service API: the S...
- Google's Closure Compiler Service API: Optim...

Developer Shed Affiliates


Dev Shed Tutorial Topics: