javascript - Validate input form using jquery with reCAPTCHA

I have a ment 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"]["ment"].value;
    if (x==null || x=="") {
        jAlert('Please enter a ment', '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 ment 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 ment</h4>
<form action="blog?post=".$_GET["post"]."#ments" 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="ment" class="tbox" rows="6" title="Type your ment" ></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?

I have a ment 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"]["ment"].value;
    if (x==null || x=="") {
        jAlert('Please enter a ment', '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();
            }
        }
    });
}

<h4>Leave your ment</h4>
<form action="blog?post=".$_GET["post"]."#ments" 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="ment" class="tbox" rows="6" title="Type your ment" ></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?

Share Improve this question asked Sep 29, 2013 at 14:58 Sid 1,2532 gold badges24 silver badges46 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Validate input form using jquery with reCAPTCHA - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)