captcha validation in php using javascript

Question

I have a comments form which uses ajax to display the comments box using a pop up menu, and on submitting the comment, the comment gets registered to the appropriate post (without any page refresh). I want to add captcha to this form.

I tried implementing the following javascript code which generates a small random number captcha.

<p>

      <label for="code">Write code below > <span id="txtCaptchaDiv" style="color:#F00"></span><!-- this is where the script will place the generated code -->

      <input type="hidden" id="txtCaptcha" /></label><!-- this is where the script will place a copy of the code for validation: this is a hidden field -->

      <input type="text" name="txtInput" id="txtInput" size="30" />

</p>

The above html is used to display the generated captcha and a text input for the user to enter the code.

The following is the javascript code which generates the code -

<script type="text/javascript">
//Generates the captcha function    
    var a = Math.ceil(Math.random() * 9)+ '';
    var b = Math.ceil(Math.random() * 9)+ '';       
    var c = Math.ceil(Math.random() * 9)+ '';  
    var d = Math.ceil(Math.random() * 9)+ '';  
    var e = Math.ceil(Math.random() * 9)+ '';  

    var code = a + b + c + d + e;
    document.getElementById("txtCaptcha").value = code;
    document.getElementById("txtCaptchaDiv").innerHTML = code;  
</script>

The next javascript code is used for validation of the captcha -

<script type="text/javascript">
function checkform(theform){
    var why = "";

    if(theform.txtInput.value == ""){
        why += "- Security code should not be empty.\n";
    }
    if(theform.txtInput.value != ""){
        if(ValidCaptcha(theform.txtInput.value) == false){
            why += "- Security code did not match.\n";
        }
    }
    if(why != ""){
        alert(why);
        return false;
    }
}

// Validate the Entered input aganist the generated security code function   
function ValidCaptcha(){
    var str1 = removeSpaces(document.getElementById('txtCaptcha').value);
    var str2 = removeSpaces(document.getElementById('txtInput').value);
    if (str1 == str2){
        return true;    
    }else{
        return false;
    }
}

// Remove the spaces from the entered and generated code
function removeSpaces(string){
    return string.split(' ').join('');
}

</script>

This code works properly when not combined with the comments form. On combining with the comments form, the validation is not done.

For the ajax based comments form, the submit button is passing a hidden input variable on submitting the comment which relates it to the appropriate post. This is the submit button code for my comments section -

<button type="submit" class="comment-submit btn submit" id="submitted" name="submitted" value="submitted"><?php _e( 'Submit', APP_TD ); ?></button>

<input  type='hidden' name='comment_post_ID' value='<?php echo $post->ID; ?>' id='comment_post_ID' />

So basically i want my code to check the captcha value first on submit button of the comment form, and if its proper i want to submit the comment using the ajax feature only.

Answer 1

Using Javascript only for a captcha is not a good idea. As your security is done only clientside.

Your solution is using a method stopping your form submit and only if your captcha function returns true, then submiting the form data. This may be done in different ways for example jquery:

$('.comment-submit').click(function(e){
  e.preventDefault();
  if (ValidCaptcha()) {
    yourFormElement.submit();
  }
});