reCAPTCHA 表单在第二次提交时提交两次

Question

我正在使用 reCAPTCHA v2 创建一个表单，并希望能够在不重新加载页面的情况下再次提交该表单。当我第一次提交表单时，它按预期工作。但是，当我再次提交表单而不重新加载页面时，我的 CaptchaValidate 函数将被调用两次，首先返回 false，然后返回 true。为什么会这样？任何帮助都会很棒，谢谢。

HTML

<form id="form" method="POST">
        <label for="name">Name</label>
        <input class="form-control" id="name" name="name">
        <label for="age">Age</label>
        <input class="form-control" id="age" name="age">
        
        <button class="g-recaptcha" data-sitekey="myKey" data-callback="onSubmit" type="submit">Submit</button>
</form>

Javascript

function onSubmit(response) {
        $('#form').submit(function (e) {
            e.preventDefault();
            const formData = $(this).serializeArray();
            $.ajax({
                url: '/Home/CaptchaValidate',
                type: 'POST',
                dataType: 'text',
                data: { dataToken: response },
                success: function (resultData) {
                    if (resultData == 'true') {
                        //do something
                    }
                    else {
                        $('.error-message').html('could not submit form');
                    }
                },
                error: function (err) {
                    console.log(err);
                }
            })
        }).submit();
        grecaptcha.reset();
}

控制器

[HttpPost]
public async Task<string> GetCaptchaData(string dataToken)
{
    HttpClient httpClient = new HttpClient();
    string secretKey = "mySecretKey";

    var res = httpClient.GetAsync("https://www.google.com/recaptcha/api/siteverify?secret=" + secretKey + "&response=" + dataToken).Result;

    if (res.StatusCode != HttpStatusCode.OK)
        return "false";

    string JSONres = res.Content.ReadAsStringAsync().Result;
    dynamic JSONdata = JObject.Parse(JSONres);

    if (JSONdata.success != "true")
        return "false";

    return "true";

}

Answer 1

尝试使用e.stopImmediatePropagation(); 它会阻止其余的事件处理程序被执行。

function onSubmit(response) {
        $('#form').submit(function (e) {
            e.preventDefault();
            e.stopImmediatePropagation(); // new line
            

                const formData = $(this).serializeArray();
                $.ajax({
                    url: '/Home/CaptchaValidate',
                    type: 'POST',
                    dataType: 'text',
                    data: { dataToken: response },
                    success: function (resultData) {
                        if (resultData == 'true') {
                            //do something
                        }
                        else {
                            $('.error-message').html('could not submit form');
                        }
                    },
                    error: function (err) {
                        console.log(err);
                    }
                })
            }).submit();
            grecaptcha.reset();
    }