2

我有一个评论表单，它在提交时将数据插入数据库。以下是代码；

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();
            }
        }
    });
}

一切（例如表单验证工作正常，除了当我点击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>

<body>标签有一个 onload事件return reloadRecaptcha();

那么为什么在验证 reCAPTCHA之前没有提交表单呢？

4

1 回答 1

4

发生这种情况是因为 validateForm() 没有从 ajax 调用返回任何内容。您应该有一个像 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;

顺便说一句，ajax 表示异步 JavaScript 和 XML，所以我反对设置 async: false。

于 2013-09-29T15:32:59.613 回答