Comment faire de reCAPTCHA un champ obligatoire?
j'utilise Google reCAPTCHA et j'ai pu ajouter le composant CAPTCHA à ma page dans un formulaire. Mais quand je soumets le formulaire il n'y a pas de validation en cours pour vérifier si le CAPTCHA a été résolu.
Comment puis-je valider que le composant CAPTCHA a été résolu lors de la soumission de mon formulaire? Ou, en d'autres termes, comment puis-je rendre mon composant CAPTCHA nécessaire?
5 réponses
j'ai eu le même problème que le vôtre et résolu de cette façon:
déclarez D'abord une variable qui stocke 1 ou 0 Selon ou si l'Utilisateur a rempli le capcha correctement.
var allowSubmit = false;
alors vous avez besoin d'une fonction qui est exécutée lorsque l'utilisateur remplit reCapcha correctement:
function capcha_filled () {
allowSubmit = true;
}
... et une fonction qui s'exécute lorsque la session reCapcha expire:
function capcha_expired () {
allowSubmit = false;
}
pour informer reCapcha de vos fonctions (callbacks), définissez les attributs data- dans votre html:
<div class="g-recaptcha"
data-callback="capcha_filled"
data-expired-callback="capcha_expired"
data-sitekey="your site key"></div>
ou si vous utilisez une charge explicite:
var onloadCallback = function() {
grecaptcha.render('your_div_id', {
'sitekey' : 'your_site_key',
'callback': capcha_filled,
'expired-callback': capcha_expired,
});
};
vous avez également besoin d'un rappel pour la soumission du formulaire:
function check_if_capcha_is_filled (e) {
if(allowSubmit) return true;
e.preventDefault();
alert('Fill in the capcha!');
}
ajouter finalement dans le formulaire l'attribut onsubmit :
<form action="..." onsubmit="check_if_capcha_is_filled">
Remarque: comme mentionné dans les commentaires, une validation du serveur est toujours nécessaire . Le code empêche de soumettre accidentellement le formulaire à moins que le capcha soit rempli et est seulement pour la commodité de l'utilisateur .
si vous voulez utiliser les popups HTML5 natifs, que voici la solution
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;
}
j'ai trouvé que c'était un moyen rapide et facile de le faire. Ajoutez ceci à vos en-têtes:
<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>
cela ne fonctionne qu'avec HTML5, et est (ou devrait être) pris en charge par ces navigateurs: http://caniuse.com/#feat=form-validation
(la console JS dans Chrome affiche ce message d'erreur: " contrôle de formulaire invalide "seulement dans Google Chrome , et je n'ai pas été en mesure de travailler autour de cela. J'espère que quelqu'un d'autre le fera améliorer cette réponse.)
j'ai vérifié l'existence de #G-recaptcha-réponse:
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;
}
//...
});
cela devrait vraiment faire partie des docs...
pas sûr si vous avez déjà résolu ce, mais vous pouvez utiliser un addon pour valider le Google recaptcha: http://formvalidation.io/addons/recaptcha2/