Captcha is not validating in jquery side..!

Question

I am using php to validate the google REcaptcha..As far as the back-end validation gose is working out fine it giving error if captcha not submitted and if done user is stor

Answer 1

First of all make sure that you've included the necessary JavaScript resource to render reCAPTCHA widget properly, like this:

Here's the reference:

• Displaying the widget

Now comes to your user's response. The response from the user's captcha challenge can be fetched in three ways. It can be as,

• g-recaptcha-response - a POST parameter in the submitted form
• grecaptcha.getResponse(widget_id) - will provide the response after the user completes the captcha.
• A string argument to the callback function specified in the config object passed to the render method.

Here's the reference:

• Verifying the user's response

For you purpose use grecaptcha.getResponse() to get the user's response.

And as a sidenote use grecaptcha.reset() to ask the end user to verify with reCAPTCHA again. From the manual:

If your website performs server side validation using an AJAX request, you should only verify the user’s reCAPTCHA response token (g-recaptcha-response) once. If a verify attempt has been made with a particular token, it cannot be used again. You will need to call grecaptcha.reset() to ask the end user to verify with reCAPTCHA again.

Here's your HTML code:

    

        
    
    

        
    
    

        
    
    

        
    
    

        
    
    

        

            

            
        
    
    Register


Already have an account?
Login

Your jQuery should be like this:

$(document).ready(function(){
    //execute's the function on click
    $("#submit").click(function(e){

        var recaptchaResponse = grecaptcha.getResponse();

        var status = $('form')[0].checkValidity();
        if(status){
            /*jquery to call the url requested 
            and parse the data in json*/
            $.ajax({
                url: "process.php",
                type: "POST",
                data: {
                    fname: $("#fname").val(),
                    lname: $("#lname").val(),
                    email: $("#email").val(),
                    password: $("#password").val(),
                    mobile: $("#mobile").val(),
                    recaptchaResponse: recaptchaResponse
                },
                async: false,
                dataType: "JSON",
                /*Give out the alert box
                to display the results*/ 
                success: function (json){
                    if(json.error){
                        alert(json.error_msg);
                        grecaptcha.reset();
                        e.preventDefault();
                    }else{
                        alert("Registeration successful!",json.user.email);
                        $('#register').submit();
                    }
                },
                error: function(jqXHR, textStatus, errorThrown){
                    alert(errorThrown);
                }
            });
        }

    });
}); 

And finally your PHP should be like this:

success){
            // success
        }else{
            // failure
        }

    }

    // your code

?>