为什么在同一时刻出现两个 recaptcha？

Question

我在一个页面上有两种模式 windows 形式（授权和注册）。对于这两种形式，我都连接了一个不可见的 recaptcha (v2)。这是 recaptcha init 的代码：

var idCaptcha1, idCaptcha2;
var onloadReCaptchaInvisible = function () {
    //login
    idCaptcha1 = grecaptcha.render('recaptcha1', {
        "sitekey": "6LfpltgUAAAAAMW3PstNGrEk3pMos0TzN9jyL7mT",
        "callback": "onSubmitReCaptcha1",
        "size": "invisible"
    });
    //reg
    idCaptcha2 = grecaptcha.render('recaptcha2', {
        "sitekey": "6LfpltgUAAAAAMW3PstNGrEk3pMos0TzN9jyL7mT",
        "callback": "onSubmitReCaptcha2",
        "size": "invisible"
    });
};

function onSubmitReCaptcha1(token) {
    alert('test');
    sendForm('signin', idCaptcha1);
}

function onSubmitReCaptcha2(token) {
    sendForm('signup', idCaptcha2);
}

当用户提交任何表单时，我尝试找出具体是什么表单，并执行我需要的验证码：

$('form').submit(function(event) {
    // отменим отправку форму на сервер
    event.preventDefault();

    switch($(this).closest('.modal').attr('id')){
        case 'signin':
            grecaptcha.execute(idCaptcha1);
        case 'signup':
            grecaptcha.execute(idCaptcha2);
    }

});

最后，这是发送表单函数的代码：

function sendForm(id,captcha){
    alert(id);
    let form = $('#'+id).find('form'),
        url  = form.attr('action'),
        formData = new FormData(form);
    formData.append('g-recaptcha-response', grecaptcha.getResponse(captcha));

    console.log(url);    
    console.log(formData);        
}

因此，验证码工作正常，而且它们同时出现。我做错了什么？ 我怀疑 $('form').submit() 有问题，但我找不到原因。

Answer 1

您忘记了每个 case 末尾的 break 语句。如果您匹配第一个案例但没有 break，它会失败并执行下一个案例，因此会显示两个 recaptchas。

$('form').submit(function(event) {
    // отменим отправку форму на сервер
    event.preventDefault();

    switch($(this).closest('.modal').attr('id')){
        case 'signin':
            grecaptcha.execute(idCaptcha1);
            break;
        case 'signup':
            grecaptcha.execute(idCaptcha2);
            break;
    }
});