For me the word CAPTCHA has only one meaning and it is PAIN, though I am convinced that we need it in order to protect our forms against spamming bots.

I considered that it would be really nice if we could provide a CAPTCHA script at our websites which gives an immediate feedback about the correctness of the typed password. I can hardly imagine more annoying thing than when after posting you need to recognize that the control number was false and your form was reseted as well.

After a couple of hour work it seems that I managed to compile a quite fancy method to handle this issue.

The html code of the input is the following:

<input name="seccode" type="text" id="seccode_id" size="20" onkeyup="count()" style="background-color:#FFFFFF"/>
<span id="ok"></span>

, it will receive evaluation from the JavaScript code below when a keyboard key is released (onkeyup event).


<script type="text/javascript">
function count(){
var desc = document.getElementById("seccode_id").value;
var code = "<?php echo rtrim(preg_replace('/(.)/', '$1%51%', $_SESSION['secword']));?>";
var result = code.replace(/%51%/gi, "");
var length = desc.length;
if (desc.slice(0,length)==result.slice(0,length))
{document.getElementById("seccode_id").style.backgroundColor="#E2FFB1";
document.getElementById("ok").innerHTML = "";}
else
{document.getElementById("seccode_id").style.backgroundColor="#DF625B";
document.getElementById("ok").innerHTML = "the last charcter you entered is invalid";}
if (length==0){
document.getElementById("seccode_id").style.backgroundColor="#FFFFFF";
document.getElementById("ok").style.visibility="hidden";}
if (length==6 && desc.slice(0,length)==result.slice(0,length)){
new Fx.Style('secur', 'opacity', {duration:1000}).start(1,0);
document.getElementById("ok").style.visibility="hidden";}}
</script>


The code has two inputs: the $_SESSION[’secword’] which is generated by the CAPTCHA script and the other one is the seccode input. Unfortunately I couldn’t avoid displaying the CAPTCHA string in the source hence I used the preg_replace php and the replace js function in order to mask it, inserting and deleting the %51% string among the chracters of the CAPTCHA.

The operation of the script in nutshell is the following. The JavaScript grabs the value of the input after every typed character, inspects its length and examine if the same length string of the CAPTCHA are identical with it. If the result is YES the background of the input will turn green, otherwise it will turn red and a warning message will be injected into the span element.

The last three lines are mostly for the fancy effect, when the typed and the generated strings are the same in their full length, the mootools framework will set the opacity of the containing div to 0.

Working demo

Have a nice further day!