Validate input form using jquery with reCAPTCHA

Question

I have a comment form which insert data to a database upon submitting. Following is the code;

function reloadRecaptcha() {
    var publicKey = "*************************************";
    var div = "recap";
    Recaptcha.create(publicKey,div,{theme: "white"});
    return false;
}

function validateForm() {
    var x=document.forms["cmnts"]["name"].value;
    if (x==null || x=="") {
        jAlert('Please enter your name', 'Error');
        return false;
    }

    var x=document.forms["cmnts"]["email"].value;
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
        jAlert('Please enter a valid email address', 'Error');
        return false;
    }

    var x=document.forms["cmnts"]["comment"].value;
    if (x==null || x=="") {
        jAlert('Please enter a comment', 'Error');
        return false;
    }

    var challenge = Recaptcha.get_challenge();
    var response = Recaptcha.get_response();
    $.ajax({
        type: "POST",
        url: "includes/valrecaptcha.php",
        async: false,
        data: {
            challenge: challenge,
            response: response
        },
        success: function(resp) {
            if(resp == "false") {
                jAlert('Please enter captcha words correctly', 'Error');
                reloadRecaptcha();
            }
        }
    });
}

Everything (such as form validating works fine except when I hit the submit button, the comment is posted no matter the reCAPTCHA is correct or not. Right before the page starts navigating, I see the alert message. I'm using jAlert to display alert messages. Following is the form;

<h4>Leave your comment</h4>
<form action="blog?post=".$_GET["post"]."#comments" onsubmit="return validateForm();" name="cmnts" method="post">
<div class="form_row">
    <label>Name</label><br />
    <input type="text" class="tbox" name="name" title="Type your name"/>
</div>
<div class="form_row">
    <label>Email (not visible to others)</label><br />
    <input type="text" class="tbox" name="email" title="Type your email" />
</div>
<div class="form_row">
    <label>Comment</label><br />
    <textarea  name="comment" class="tbox" rows="6" title="Type your comment" ></textarea>
    <p>You may use following HTML tags and attributes: &lt;b&gt; &lt;cite&gt; &lt;del&gt; &lt;i&gt; &lt;u&gt;</p>
</div>
<div class="form_row" style="height:80px;">
    <label>Captcha</label><br />
    <div id="recap"></div>
    <p>I must make sure that you're <i>not</i> a spammer or a bot</p>
    <div style="clear:both;">           
</div>
<input value="Comment" id="submit" name="submit" class="submit_btn float_l" type="submit">
</form>

The <body> tag has an onload event return reloadRecaptcha();

So why doesn't the form get submitted before validating the reCAPTCHA?

Rajesh · Accepted Answer · 2013-09-29 15:32:59Z

4

This happens because validateForm() does not return anything from the ajax call. You should have a variable like isCaptchaValidated, and set that inside the success() of ajax, and then return that variable after the ajax like below:

var isCaptchaValidated = false;
$.ajax({
    type: "POST",
    url: "includes/valrecaptcha.php",
    async: false,
    data: {
        challenge: challenge,
        response: response
    },
    success: function(resp) {
        if(resp == "false") {
            jAlert('Please enter captcha words correctly', 'Error');
            reloadRecaptcha();
        } else {
           isCaptchaValidated = true;
        }
    }
});
return isCaptchaValidated;

By the way, ajax means Asynchronous JavaScript and XML, so I would go against setting async: false.

answered Sep 29, 2013 at 15:32

Rajesh

3,7781 gold badge26 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Terry Over a year ago

@Rajesh: if you're using async method, your isCaptchaValidated is return before the value can be set in the success method.

Collectives™ on Stack Overflow

Validate input form using jquery with reCAPTCHA

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related