使用带有reCAPTCHA的jquery验证输入表单

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; 一切（例如表单验证都可以正常工作，除了当我按下“ submit按钮时，无论reCAPTCHA是否正确都将发布评论。就在页面开始导航之前，我看到了警报消息。我正在使用jAlert来显示警报）消息，形式如下；

<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(); <body>标签具有一个onload事件return reloadRecaptcha();

So why doesn't the form get submitted before validating the reCAPTCHA? 那么，为什么在验证reCAPTCHA 之前不提交表单？

Answer 1

This happens because validateForm() does not return anything from the ajax call. 发生这种情况是因为validateForm（）不从ajax调用返回任何内容。 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: 您应该有一个像isCaptchaValidated这样的变量，并在ajax的success（）中进行设置，然后在ajax之后返回该变量，如下所示：

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. 顺便说一句，ajax意味着异步JavaScript和XML，因此我反对设置async：false。

使用带有reCAPTCHA的jquery验证输入表单

问题描述

1 个解决方案

解决方案1
4 已采纳 2013-09-29 15:32:59

使用带有reCAPTCHA的jquery验证输入表单

问题描述

1 个解决方案

解决方案1 4 已采纳 2013-09-29 15:32:59

解决方案1
4 已采纳 2013-09-29 15:32:59