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.

TABLE OF CONTENTS:

By: Alejandro Gervasio

Poor Best

Rating:

/ 8

March 18, 2009

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

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">

<head>

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

body{

padding: 0;

margin: 0;

background: #fff;

}

h1{

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

color: #000;

}

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

color: #000;

}

#formbox{

width: 380px;

text-align: right;

padding: 10px;

background: #eee;

}

#codebox{

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

color: #00f;

}

.inputbox,textarea{

width: 300px;

border: 1px solid #999;

}

.checkingcode{

width: 50px;

border: 1px solid #999;

}

</style>

</head>

<body>

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

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

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

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

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

</form>

</div>

</body>

</html>

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.

Next: Generating verification codes with Ajax >>