|
|
JavaScript AJAX method of human verification captcha
I'm somewhat passionate about this method of our captcha verification.
Why? you ask? Because I learned something new. AJAX or (Asynchronous
Javascript Technology and XML) is really a pretty cool way to validate
you form before actually submitting it. It also is a great way to
validate our captcha.
The reason I'm so passionate about this method is because 1) I learned
something new. And 2) it can be used fairly easily in your client script
to validate our (TeleportJobs) captcha.
The following outlines the method of implementing AJAX technology to
verify our captcha. The best part is that you can tailor this example to
your code.
Implemetation:
-
Make sure that your web host allows you to have Server Side Includes or
SSI. Basically this allows you to save a page as .SHTML vs .HTM or .HTML
Also remember to shave your page with the .SHTML extension.
-
Make sure you know YOUR webmaster ID.
-
Copy the following JavaScript into the <head></head> section of your
SHTML page. Preferably right before the closing tag </head>
-
<script language="javascript" type="text/javascript">
var req;
function ValidateCaptcha() {
var remoteip = '<!--#echo var="REMOTE_ADDR"-->';
var idCaptcha = document.getElementById("captcha");
var url = "http://www.teleportjobs.com/captcha/captcha_verify.asp"
if (typeof XMLHttpRequest != "undefined") {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("MSXML2.XMLHTTP");
}
req.open("POST", url, true);
req.onreadystatechange = CaptchaResponse;
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send("uid=YOUR_WMT_ID&captcha=" + encodeURIComponent(idCaptcha.value) + "&rip=" + remoteip + "&nocache=" + Date())
}
function CaptchaResponse() {
if (req.readyState == 4)
{
if (req.status == 200)
{
var message = req.responseText;
var mdiv = document.getElementById("CaptchaMessage");
if (message == "True")
{
mdiv.innerHTML = "<div style=\"color:green\">You are human!</ div>";
document.FORMID.action = "YOUR SUBMIT PAGE"
document.FORMID.submit()
}
else
{
mdiv.innerHTML = "<div style=\"color:red\">Invalid Text</ div>";
}
}
else
{
mdiv.innerHTML = "<div style=\"color:red\">Error Condition</ div>";
}
}
}
</script>
-
Make sure that you change YOUR_WMT_ID to your actual webmaster ID that
was assigned to you when you signed up.
-
Make sure that the "id" element of your form is set to the same name as
"FORMID" above.
-
"YOUR SUBMIT PAGE" above should be the url of the page that you want to
submit the form contents to if the captcha text is valid.
-
Place a "div" tag directly below the captcha image that is formatted as
such:
-
<div id="CaptchaMessage"></div>
This will be used to tell your visitor if the text
he/she entered is valid or invalid.
-
Set the "action" element within the <form> tag to:
action="JavaScript:ValidateCaptcha();"
-
Make sure that you have placed the captcha image and a text box with the
name and id set to "captcha"
-
Here is an outline of the page format
<html>
<head>
<script language="javascript" type="text/javascript">PLACE
JavaScript CODE HERE</script>
</head>
<body>
<form name="" id="FORMID" method="POST" action="JavaScript:ValidateCaptcha();">
<img src="URL OF CAPTCHA IMAGE">
<input type="text" name="captcha" id="captcha">
<input type="submit" name="" value="submit">
<div id="CaptchaMessage"></div>
</form>
</body>
<html>
The empty
name elements can be named whatever you want.
- I think that this is it. Let me know if this works and if you have any
questions on how to implement this by contacting me
here.
|
