WebGuru’s Blog about Digital Life

I know there are a lot of good and working image validation scripts available now, and they have been used widely on the Internet already. But I just need a very simple and quick way to stop the SPAM robots from directly accessing to my web forms and then saving un-wanted information into the database or sending out emails from the web form.

Since I have ASP, ASP.NET and PHP web forms and I need to update them all with this new validation bar. A cross-programming language solution such as Javascript sounds pretty fit. So I decided to write my own Javascript to stop these bots on my web forms. As a result, a very simple, easy-to-implement validation bar solution was born for your free reference.

Create a new Javascript file with additional validation textbox, hidden value and random numbers

In the new Javascript, you first need to generate a random number.

//Generate a random 4 digitals number
var i=parseInt(Math.random()*8999 + 1000);

//then start to write a text box for visitors to enter
document.write(’<input type=”text” name=”code_verfiy” value=”" />’);

//and insert a hidden value for your web form, assign the random number to it
document.write(’<input type=”hidden” name=”code” value=”‘ + i + ‘” />’);

//finally display the random number to the visitors
document.write(’<label style=”" >’ + i + ‘</label>’)

Include this Javascript in your web form HTML file

In your web form file, embed the above Javascript right before your Submit button and put some texts to describe your validation bar. For example, my Javascript file name is “code.js”, so the HTML source code looks like the following.

<form name=”myForm” action=”save.asp”>
…… //other form elements
<label>Verify Code</label> <script language=”JavaScript” type=”text/javascript” src=”code.js”></script>
….
<input type=”submit”….>
</form>

Add conditional detection in your executable form action file

No matter you use the same file or separate file to execute your web form, you need to add the following code to determine whether it came from a real person or some bots. I am using my ASP (VB) source as the sample, you can use your own language to do the same thing.

‘//To see whether the validation code existing or matched (In VB)
If Request.Form(”code_verify”) = “” OR Request.Form(”code_verfiy”) <> Request.Form(”code”) Then
‘//display error messages
Response.write (”error, do not access to this page directly”)
Response.End()
Else
‘//do something else, business as the usual
End If

Some Advance Topics

Well, the above should be working in a lot of situations. And since I did not get a chance to test in all possible environments, and my initial purpose was just to do a simple validation, you should use this method as it is and adjust it if you still see some un-wanted results.

And of course, you can do more with this simple solution. Like, you can move the code_verify textbox out from the Javascript file and put it in the web form. Then you can add additional client-side script to validate it as a required field.

And, you can put more style on your validation text such as background color, borders around it, or different font color to make it more attractive. (like this 1234 ). There is no limitation to it, just use your imagination!

Have fun, and enjoy programming.

Technorati : Javascript
Del.icio.us : Javascript