Google recaptcha V3 , bouton nécessitant d’appuyer deux fois sur le bouton d’envoi – JavaScript – SitePoint Forums – Systeme io

Google recaptcha V3 , bouton nécessitant d’appuyer deux fois sur le bouton d’envoi – JavaScript – SitePoint Forums – Systeme io


J’ai essayé google recaptcha v3, après avoir ajouté le bouton, il faut cliquer deux fois pour terminer l’action.

$(document).ready(function() {

$("#reg-submit").on('click', function(e){
    e.preventDefault();
   // alert('hi');
    var isvalid4 = true;
    var patternPhone = /^(?=.*(0-9))(- +()0-9)+$/;
    if($('#fullName').val() == '') {
        $('#name_error').text($('#name_error').data("error-mandatory"));
        isvalid4 = false;
    } 
    if($('#email').val() == '') {
        $('#email_error').text($('#email_error').data("error-mandatory"));
        isvalid4 = false;
    } else {
        if (!validateEmail($('#email').val())) {
            $('#email_error').text($('#email_error').data("error-invalidemail"));
            isvalid4 = false;
        } 
    }
    if($('#phone').val() == '') {
        $('#phone_error').text($('#phone_error').data("error-mandatory"));
        isvalid4 = false;
    } 
    if( $('#phone').val() != '' ) {
        var telPhone = $('#phone').val();            
        if ($.trim(telPhone).match(patternPhone)) {
            $('#phone_error').text('');
        } else {
            $('#phone_error').text($('#phone_error').data("error-invalidphone"));
            isvalid4 = false;
        }
    }
    if($('#company').val() == '') {
        $('#company_error').text($('#company_error').data("error-mandatory"));
        isvalid4 = false;
    } 
    if(!isvalid4) {
        return false;
    }
     if (grecaptcha.getResponse().length != 0) {
    $("#reg-submit").attr("disabled", true);
    $.ajax({
        type: 'POST',
        url: $('#form-ajaxurl').val(),
        data: $('#demo_form').serialize(),
        success: function(data){
            $('#reg-submit').attr("disabled", false);
            var output = JSON.parse(data);
            if(output.error == 1) {
                $('#form-errors').html(output.result);
            } 
            else if(output.error == 2){
                $('#form-errors').html(output.result);
            }
            else {
             window.location.href = output.result;
            }
        }
    });
    }
    else
    {
      }
});

Bouton HTML

div class="form_wrpr">
                                     <f:form.hidden id="g-recaptcha-response" property="g-recaptcha-response" /> button class="g-recaptcha btn btn-blue" id="reg-submit"
                                    data-sitekey="{fields.clientKey}" >
                                     {fields.Button}</button>
                                /div>


Salut @meera1 et bienvenue sur les forums :vague:

Lorsque vous postez du code dans ces forums, veuillez tout sélectionner et cliquer sur le </> bouton dans l’éditeur ou placez-le entre trois backticks avant et après sur des lignes séparées.

Je l’ai fait pour vous maintenant.

Un bouton standard (un bouton sans type) n’aura pas d’action par défaut à empêcher.

ne devrait rien faire.

Qu’est-ce qui invoque/gère le défi grecaptcha ? Je ne vois pas d’appel à execute

d’accord, nous utilisons simplement google captcha pour la validation côté serveur uniquement. C’est pourquoi nous n’incluons aucun appel dans le script. J’ai changé mon code quelque chose comme ça

$(document).ready(function() {

 var alreadySubmitted = false;//adding a extra variable to check already submitted.
$("#reg-submit").on('click', function(){

var isvalid4 = true;
var patternPhone = /^(?=.*(0-9))(- +()0-9)+$/;

if($('#fullName').val() == '') {
    $('#name_error').text($('#name_error').data("error-mandatory"));
    isvalid4 = false;
} 
if($('#email').val() == '') {
    $('#email_error').text($('#email_error').data("error-mandatory"));
    isvalid4 = false;
} else {
    if (!validateEmail($('#email').val())) {
        $('#email_error').text($('#email_error').data("error-invalidemail"));
        isvalid4 = false;
    } 
}
if($('#phone').val() == '') {
    $('#phone_error').text($('#phone_error').data("error-mandatory"));
    isvalid4 = false;
} 
if( $('#phone').val() != '' ) {
    var telPhone = $('#phone').val();            
    if ($.trim(telPhone).match(patternPhone)) {
        $('#phone_error').text('');
    } else {
        $('#phone_error').text($('#phone_error').data("error-invalidphone"));
        isvalid4 = false;
    }
}
if($('#company').val() == '') {
    $('#company_error').text($('#company_error').data("error-mandatory"));
    isvalid4 = false;
} 

if(!isvalid4) {
    return false;
}
    grecaptcha.ready(function() {
      grecaptcha.execute('clientkey', {action: 'submit'}).then(function(token) {
    $.ajax({
    type: 'POST',
    url: $('#form-ajaxurl').val(),
    data: $('#demo_form').serialize(),
    success: function(data){
        // $('#reg-submit').attr("disabled", false);
        var output = JSON.parse(data);
        if(output.error == 1) {
            $('#form-errors').html(output.result);
        } 
        else if(output.error == 2){
            $('#form-errors').html(output.result);
        }
        else {
             window.location.href="
        }
    }
    });
    });
    });

   });

Oh, le lien vient de la classe, n’est-ce pas…

Bon, vous avez donc doublé le bouton, et le défi n’est pas répondu au moment où votre code s’exécute la première fois dans la fonction, donc le if échoue…

Oui, le côté Api fonctionne parfaitement, mais je suis resté bloqué sur les problèmes de bouton côté client.

=>
function onSubmit(token) {

===

=>

<button class="g-recaptcha btn btn-blue" id="reg-submit"
                                    data-sitekey="{fields.clientKey}" 
                                    data-callback="onSubmit" >
                                     {fields.Button}</button>

Faut-il régler le problème ?

(en gros, nous ne lions pas la fonction de validation au bouton, et à la place, nous disons à reCaptcha « lorsque vous avez fini de défier l’utilisateur, appelez cette fonction ».)



1 J’aime

Laisser un commentaire