Question

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

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是否正确，都会发布评论。在页面开始导航之前，我会看到警报消息.I使用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之前，表单是否已提交？

Answer 1

这是因为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。

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

1 个答案: