J'ai ajouté ce qui suit avant la fin de la tête
<script src='https://www.google.com/recaptcha/api.js'></script>
J'ai ajouté ceci avant la fin du formulaire
<div class="g-recaptcha" data-sitekey="== xxxxxx =="></div>
Je peux voir le recaptcha semblable à https://developers.google.com/recaptcha/
Toutefois, lorsque l'utilisateur appuie sur des données sans cocher la case correspondante, les données sont soumises. Dois-je ajouter un autre code pour vérifier si l'utilisateur a coché la case? Espérons que dans js?
Google dispose d'une option de rappel lorsque la case est cochée.
Ajoutez ceci à votre élément de formulaire:
data-callback="XXX"
Exemple:
<div class="g-recaptcha" data-callback="recaptchaCallback" data-sitekey="== xxxxxx =="></div>
Et un attribut de désactivation pour votre bouton d'envoi.
Exemple:
<button id="submitBtn" disabled>Submit</button>
Ensuite, créez une fonction de rappel et écrivez le code dont vous avez besoin.
Exemple:
function recaptchaCallback() {
$('#submitBtn').removeAttr('disabled');
};
Vous pouvez également appeler l'objet grecaptcha pour vérifier. grecaptcha.getResponse();
est vide lorsqu'il n'est pas coché et possède le code de vérification lorsqu'il est coché.
grecaptcha.getResponse().length === 0
lorsque non cochée
function isCaptchaChecked() {
return grecaptcha && grecaptcha.getResponse().length !== 0;
}
if (isCaptchaChecked()) {
// ...
}
Pour vérifier si google recaptcha est coché ou non, vous pouvez le faire avec le code suivant:
<script>
if(grecaptcha && grecaptcha.getResponse().length > 0)
{
//the recaptcha is checked
// Do what you want here
alert('Well, recaptcha is checked !');
}
else
{
//The recaptcha is not cheched
//You can display an error message here
alert('Oops, you have to check the recaptcha !');
}
</script>
Laissez le navigateur faire le travail pour vous! (basé sur la réponse slinky2000)
note: ceci est uniquement destiné à empêcher l'envoi d'un recaptcha non contrôlé 'accidentellement'. Vous devez encore vérifier le recaptcha côté serveur car un bot s'en fiche ...
Ajouter une balise d'entrée invisible avec required=true
attribut juste en dessous du div.g-recaptcha
.
<input id='recaptcha_check_empty' required tabindex='-1',
style='width:50px; height:0; opacity:0; pointer-events:none;
position:absolute;
bottom:0;'>
Placez les deux largeurs a div
avec position=relative;
pour pointer le bottom:0;
ci-dessus jusqu'au bas de recaptcha.
Maintenant, le navigateur demande gentiment de remplir ce champ - en pointant sur le recapcha.
Maintenant, nous avons besoin du rappel:
<div class="g-recaptcha" data-callback="recaptchaCallback" ...
et
function recaptchaCallback() {
$('#recaptcha_check_empty').val(1);
}
Pour vérifier si google recaptcha v2 est coché ou non, vous pouvez le faire avec le code suivant:
var checkCaptch = false;
var verifyCallback = function(response) {
if (response == "") {
checkCaptch = false;
}
else {
checkCaptch = true;
}
};
$(document).ready(function() {
$("#btnSubmit").click(function() {
if (checkCaptch && grecaptcha.getResponse()!="") {
//Write your success code here
}
});
})