google invisible recaptcha , wordpress, ajax, save data

Question

Im trying to figure out how to integrate Google Invisible reCaptcha to a custom submit form attached to submit.js (ajax). Thanks to this Implement the new Invisible reCaptcha from Google i'm using with success Google invisible recaptcha on 99% of the site. I try to follow the same guide but when i try to add into listing.php before the call to submit.js (ajax), everything works but if the user commit some errors (forget some fields), values are not saved like before. Here is the submit.js (ajax)

jQuery('#lp-submit-form').submit(function(e){
$this = jQuery(this);
$this.find('.preview-section .fa-angle-right').removeClass('fa-angle-right');
$this.find('.preview-section .fa').addClass('fa-spinner fa-spin');
var fd = new FormData(this);

fd.append('action', 'listingpro_submit_listing_ajax');
jQuery.ajax({
    type: 'POST',
    url: ajax_listingpro_submit_object.ajaxurl,
    data:fd,
    contentType: false,
    processData: false,

    success: function(res){


        var resp = jQuery.parseJSON(res);
        if(resp.response==="fail"){
            jQuery.each(resp.status, function (k, v) {

                if(k==="postTitle"){
                    jQuery("input:text[name='postTitle']").addClass('error-msg');   
                }
                else if(k==="gAddress"){
                    jQuery("input:text[name='gAddress']").addClass('error-msg');
                }
                else if(k==="category"){
                    jQuery("#inputCategory_chosen").find('a.chosen-single').addClass('error-msg');
                    jQuery("#inputCategory").next('.select2-container').find('.selection').find('.select2-selection--single').addClass('error-msg');
                }
                else if(k==="location"){
                    jQuery("#inputCity_chosen").find('a.chosen-single').addClass('error-msg');
                    jQuery("#inputCity").next('.select2-container').find('.selection').find('.select2-selection--single').addClass('error-msg');
                }
                else if(k==="postContent"){
                    jQuery("textarea[name='postContent']").addClass('error-msg');
                }
                else if(k==="email"){
                    jQuery("input#inputEmail").addClass('error-msg');
                }

            });
            var errorrmsg = jQuery("input[name='errorrmsg']").val();
            $this.find('.preview-section .fa-spinner').removeClass('fa-spinner fa-spin');
            $this.find('.preview-section .fa').addClass('fa-times');
            $this.find('.preview-section').find('.error_box').text(errorrmsg).show();
        }
        else if(resp.response==="failure"){
            jQuery("input#inputEmail").addClass('error-msg');
            jQuery("input#inputEmail").after(resp.status);
            $this.find('.preview-section .fa-spinner').removeClass('fa-spinner fa-spin');
            $this.find('.preview-section .fa').addClass('fa-angle-right');
        }
        else if(resp.response==="success"){
            $this.find('.preview-section .fa-spinner').removeClass('fa-times');
            $this.find('.preview-section .fa-spinner').removeClass('fa-spinner fa-spin');               
            $this.find('.preview-section .fa').addClass('fa-check');
            var redURL = resp.status;
            function redirectPageNow(){
                    window.location.href= redURL;
            }
            setTimeout(redirectPageNow, 1000);

        }


    },
    error: function(request, error){
        alert(error);
    }
});

e.preventDefault();

 }); 

Any idea ? Thanks if you can give me some Tips, im in a complete Nightmare :D

Answer 1

Check google captcha value by use below code in in .js file or .php file. If empty the google captcha give the alert box or error message.

if(isset($_POST['g-recaptcha-response']))
{
    $captcha=$_POST['g-recaptcha-response'];
}
if(!$captcha)
{
  echo '<p>Please verify that you are not a robot.</p>';
}

This code is for PHP. You can check $_POST value in .js
I think it helps you.