javascript - 如何使用 JS 在 Google recapcha 中自定义消息有效性？

Question

如何在 Google 验证码中设置自定义消息有效性？

如果用户在点击提交按钮之前没有或忘记选中 Google Recaptcha 复选框。将显示一条弹出消息，用户需要先选中该复选框。

我有 JS 可以验证输入文本框并且它正在工作。但我不知道如何在 Google Recaptcha 中实现它

JS:

function InvalidMsg(textbox){
     if(textbox.validity.patternMismatch){
        textbox.setCustomValidity('Please enter your name here');
    } else if(textbox.validity.valueMissing){
         textbox.setCustomValidity('This field is required');
    } else {
                textbox.setCustomValidity('');
    }
    return true;
}

Answer 1

您必须使用 reCaptcha 验证响应回调。像这样的东西:https://www.google.com/recaptcha/api.js?onload=reCaptchaCallback&render=explicit'>

您还需要将错误消息附加到您正在使用的 reCaptcha 容器中。

var RC2KEY = 'sitekey',
    doSubmit = false;

function reCaptchaVerify(response) {
    if (response === document.querySelector('.g-recaptcha-response').value) {
        doSubmit = true;
    }
}

function reCaptchaExpired () {
    /* do something when it expires */
}

function reCaptchaCallback () {
    grecaptcha.render('id', {
        'sitekey': RC2KEY,
        'callback': reCaptchaVerify,
        'expired-callback': reCaptchaExpired
    });
}

document.forms['form-name'].addEventListener('submit',function(e){
    if (doSubmit) {
        /* submit form or do something else */
    }
    else {
        /**
         * Show your error message here.
         * InvalidMsg function may not work.
         * recaptcha does not have properties you are checking for.
         */
    }
})