Google recaptcha V3 , button needing to press the submit button twice

JavaScript
,
1

I tried google recaptcha v3 , After adding button it need to click twice to complete 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
    {
      }
});

Html Button

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>
2

Hi @meera1 and welcome to the forums :wave:

When you post code in these forums please select all of it and click the </> button in the editor or enclose it within three backticks before and after on separate lines.

I’ve done this for you now.

3

Hi Thank you,

4

A standard button (a button without a type) wont have a default action to prevent.

shouldnt do anything.

What’s invoking/handling the grecaptcha challenge? I dont see a call to execute…

5

okay, We are just used google captcha for serverside validation only. That why we are not include any call in script.I changed my code some thing like this

$(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 = 'test.com'+output.result;
        }
    }
    });
    });
    });

   });
6

Oh the bind’s coming from the class isnt it…

Right, so you’ve double-bound the button, and the challenge isnt responded to by the time your code executes the first time in the function, so the if is failing…

7

Yes, Api side is perfectly working, but i stuck on client side button issues.

8

=>
function onSubmit(token) {

===

=>

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

Should fix the issue?

(basically, we dont bind the validation function to the button, and instead tell reCaptcha “when you’re done challenging the user, call this function”.)

1 Like