Come posso rendere reCAPTCHA un campo obbligatorio?

Question

Sto utilizzando Google reCAPTCHA e sono stato in grado di aggiungere il componente CAPTCHA alla mia pagina all'interno di un modulo. Ma quando invio il modulo non è in corso alcuna verifica per verificare se il CAPTCHA è stato risolto.

Come convalidare che il componente CAPTCHA è stato risolto durante l'invio del modulo? O, in altre parole, come posso rendere necessario il mio componente CAPTCHA?

Answer 1

Ho avuto lo stesso problema come la tua e risolto in questo modo:

prima dichiarare un variabile che memorizza 1 o 0 a seconda che l'utente abbia riempito correttamente il capcha.

var allowSubmit = false; 

allora avete bisogno di una funzione che viene eseguita quando l'utente compila correttamente il reCapcha:

function capcha_filled() { 
    allowSubmit = true; 
} 

... e una funzione che viene eseguita quando la sessione scade reCapcha:

function capcha_expired() { 
    allowSubmit = false; 
} 

Per comunicare a reCapcha le tue funzioni (callback), imposta gli attributi data- nel tuo codice html:

<div class="g-recaptcha" 
    data-callback="capcha_filled" 
    data-expired-callback="capcha_expired" 
    data-sitekey="your site key"></div> 

Oppure, se si utilizza il carico esplicito:

var onloadCallback = function() { 
    grecaptcha.render('your_div_id', { 
     'sitekey' : 'your_site_key', 
     'callback': capcha_filled, 
     'expired-callback': capcha_expired, 
    }); 
    }; 

è necessario anche un callback per l'invio del modulo:

function check_if_capcha_is_filled (e) { 
    if(allowSubmit) return true; 
    e.preventDefault(); 
    alert('Fill in the capcha!'); 
} 

Infine aggiungere nella forma l'attributo onsubmit:

<form action="..." onsubmit="check_if_capcha_is_filled"> 

---

Nota: come indicato nei commenti, è necessaria una convalida del server . Il codice impedisce l'invio accidentale del modulo a meno che il capcha non sia compilato e è solo per comodità dell'utente.

Answer 2

Non sono sicuro se si dispone già risolto questo, ma è possibile utilizzare un addon per convalidare la recaptcha Google: http://formvalidation.io/addons/recaptcha2/

Answer 3

Ho trovato che questo è un modo rapido & per farlo. Aggiungere questo per le intestazioni:

<script> 
window.onload = function() { 
    var recaptcha = document.forms["myForm"]["g-recaptcha-response"]; 
    recaptcha.required = true; 
    recaptcha.oninvalid = function(e) { 
    // do something 
    alert("Please complete the captcha"); 
    } 
} 
</script> 

Questo funziona solo in HTML5, ed è (o dovrebbe essere) supportato da questi browser: http://caniuse.com/#feat=form-validation

(JS console in Chrome mostra questo messaggio di errore: "Invalid form control" only in Google Chrome, e Non sono stato in grado di aggirare questo problema, speriamo che qualcun altro migliori questa risposta.)

Answer 4

se si desidera utilizzare il popup HTML5 nativo, che qui è la soluzione

JavaScript:

window.onload = function() { 
    var $recaptcha = document.querySelector('#g-recaptcha-response'); 

    if($recaptcha) { 
     $recaptcha.setAttribute("required", "required"); 
    } 
}; 

CSS:

#g-recaptcha-response { 
    display: block !important; 
    position: absolute; 
    margin: -78px 0 0 0 !important; 
    width: 302px !important; 
    height: 76px !important; 
    z-index: -999999; 
    opacity: 0; 
} 

Answer 5

ho controllato per l'esistenza di # g- recaptcha-response:

function checkRecaptcha() { 
    res = $('#g-recaptcha-response').val(); 

    if (res == "" || res == undefined || res.length == 0) 
     return false; 
    else 
     return true; 
} 

//... 

$('#frm-signup').submit(function(e) { 

    if(!checkRecaptcha()) { 
     $("#frm-result").text("Please validate your reCAPTCHA."); 
     return false; 
    } 
    //... 
}); 

Questo dovrebbe essere parte dei documenti ...